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. Support @apply with complex classes for Tailwind v1.x

If you are on Tailwind 1.x you need to add support for @apply with complex classes, including responsive and pseudo-class variants.

This will be available under a feature flag in Tailwind 1.x until it becomes the default in Tailwind 2.0. src

Adding this to tailwind.config.js means that you can use complex classes like :hover, :sm and :focus with @apply

// tailwind.config.js
module.exports = {
  experimental: {
    applyComplexClasses: true,
  },
}

2. Publish the default theme

Laravel 8 = css

The theme will be published to resources/css/

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

Laravel 7 = sass

The theme will be published to resources/sass/

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

3. 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 'custom';
@import 'tall-theme';
@import 'tailwindcss/utilities';

5. 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 andy 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.