Theme

---

The documentation on this page assumes that you went through the steps on the "Tailwind Config" page.

---

Default or custom form theme

The package provides a theme file. You can easily create your own themes by copying that file. If you create a new theme, PLEASE SHARE it. Create a pull request or an issue and it will be added to the package.

1. Publish the default theme

Laravel 8 = css

The theme will be published to resources/css/

Tailwind v2.x

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

Tailwind v1.x

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

Laravel 7 = sass

The theme will be published to resources/sass/

Tailwind v2.x

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

Tailwind v1.x

php artisan vendor:publish --tag=tall-form-theme-tw1x-sass

Deprecated classes in the 2.x theme

Some classnames that are used by this package were removed in Tailwind 2.0. They are added to the 2.x theme for backward compatibility. you can continue using them just as in Tailwind 1.0

The 2.x tall-theme.css contains: * form-* classes from the former tailwind custom-forms plugin. * all the Teal colors from Tailwind 1.x * shadow-xs class from Tailwind 1.x

2. Import the theme to app.css or app.scss

Add @import 'tall-theme'; after @import 'tailwindcss/components';.

@import 'tailwindcss/base';
@import 'tailwindcss/components'; //after components
@import 'tall-theme.css'; //omit .css if using sass
@import 'tailwindcss/utilities';

3. Don't forget to compile your css

npm run dev

Customizing the theme

1. Duplicate the tall-theme file.
2. Make your changes. (Don't change and class names.)
3. Change the @import in tailwind.config.js to your new theme file name.
4. npm run dev or prod
5. Please share your new theme, by making a PR, or opening an issue.

Optional css

Create a custom.css or custom.scss file.

/**
 * Remove the default box-shadow for invalid elements to prevent inputs in Livewire components showing with a red border by default in Firefox.
 * Src: https://github.com/laravel-frontend-presets/tall/issues/7
 */
input:invalid, textarea:invalid, select:invalid {
    box-shadow: none;
}

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

/**
* For AlpineJS
 */
[x-cloak] {
    display: none;
}

Import the custom css to app.css or app.scss

Add @import 'custom.css'; after @import 'tailwindcss/components';.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'custom.css'; //omit .css if using sass
@import 'tall-theme.css'; //omit .css if using sass
@import 'tailwindcss/utilities';

npm run dev

Next step -> Wrapper Layout