Theme

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

The theme will be published to resources/css/

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

2. Import the theme to app.css

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 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

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

Deprecated classes in Tailwind 2.0

Some classnames that are used by this package were removed in Tailwind 2.0. They are added to the tall-theme.css and tall-forms-preset.js for backward compatibility. You can continue using them just as in Tailwind 1.x

The 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

Next step -> Wrapper Layout