# 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&#x20;

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

### Optional `custom.css`

resources/css/custom.css

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

```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`&#x20;

**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"](https://github.com/tailwindlabs/tailwindcss-forms#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
