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

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