Css & Theme

Publish the theme files

If you make a new theme, please share it, by making a PR, or opening an issue

Tailwind 3

php artisan vendor:publish --tag=tall-form-theme-css

Tailwind 2

php artisan vendor:publish --tag=tall-form-theme-css-tw-2

Add to layout

app.blade.php

<header>
...
    @livewireStyles 
    @stack("styles")
...
</header>

Optional custom.css

resources/css/custom.css

input:invalid, textarea:invalid, select:invalid {
    box-shadow: none;
}

input, select, textarea, button, div, a {
    &:focus, &:active, &:hover {
        outline: none;
    }
}

[x-cloak] {
    display: none;
}

Add to app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'custom.css'; //<-optional
@import 'tall-theme.css'; //<-required
@import 'tailwindcss/utilities';

Warning!

Potential css class naming conflicts

form-* classes from the old tailwind custom-forms plugin, were removed with Tailwind 2.0, but later reintroduced in the new Tailwind form plugin.

For fallback reasons they were added to tall-theme.css

You may get class-name conflicts if:

1. You have any of the class names in your current project

2. You activated "Using classes instead of element selectors" in Tailwind form plugin

Solution: remove or alter the classes in tall-theme.css. (Search for "form-input" and you'll find them listed there.)

The tall-theme.css also contains:

• all the Teal colors from Tailwind 1.x

• shadow-xs class from Tailwind 1.x