The default tailwind classes in Elm as elm-css generated using elm-tailwind-modules
elm install matheus23/elm-default-tailwind-modules
Did you ever want to try out tailwindcss in elm, but don't want to set up npm and postcss in your project?
Use these elm-css modules. They contain everything you would get with a default tailwind configuration.
This package already comes with some configuration:
- It postprocesses the css with
autoprefixerto add as much browser compatibility as possible - It includes the
@tailwindcss/typographyplugin - It includes the
@tailwindcss/formsplugin - It includes the
@tailwindcss/aspect-ratioplugin
If you still need to customize the generated css utilities functions (for example for adjusting the colors to your brand), you can do so by providing a tailwind configuration file. However, then you'll need to generate the elm files yourself using elm-tailwind-modules.
If you want to know how this works, take a look at the code to generate this package.
Most of the time, you can use Tailwind classes with the same name, and html-to-elm.com can even generate them!
But sometimes, you may find a few quirks. Here are some with their workaround.
If you have forms in your app, you will miss the form plugin style, even if it's already included.
To get them, you need to add form_* attributes (ex: form_input, form_select, form_checkbox...) to your input elements.
See matheus23#4 for more details.
The group modifier doesn't work (see matheus23#3).
One workaround can be to add it with global CSS and classes, in a separate stylesheet or using Global:
Global.global [ Global.selector ".group:hover .group-hover-flex" [ Tw.flex ] ]The focus within pseudo class is missing from elm-css, this is not related to Tailwind but you may need it to implement some Tailwind design.
A workaround can be to implement your own:
focusWithin : List Css.Style -> Css.Style
focusWithin =
Css.pseudoClass "focus-within"Hope you will find these tips helpful ;)