postcss-elm-tailwind
view : Model -> Html Msg
view model =
Html.div [ TW.h_screen, TW.w_screen, TW.flex, TW.justify_center, TW.items_center, TW.bg_gray_200 ]
[ Html.div []
[ Html.button
[ E.onClick Decrement
, TW.px_2
, TW.px_4
, TW.text_white
, TW.bg_blue_500
, TW.w_full
]
[ Html.text "-" ]
, Html.div
[ TW.text_2xl
, TW.text_center
, TW.my_4
]
[ Html.text (String.fromInt model) ]
, Html.button
[ E.onClick Increment
, TW.px_2
, TW.px_4
, TW.text_white
, TW.bg_blue_500
, TW.w_full
]
[ Html.text "+" ]
]
]
OR
npm i -D postcss-elm-tailwind
### Other output formats
#### SVG
If you want to use Tailwind classes to style `SVG` you can output an `Svg` module like this:
```js
module.exports = {
plugins: [
require("tailwindcss"),
require("postcss-elm-tailwind")({
tailwindConfig: "./tailwind.config.js",
elmFile: "src/Tailwind.elm",
elmModuleName: "Tailwind",
formats: {
svg: {
elmFile: "src/Tailwind/Svg.elm",
elmModuleName: "Tailwind.Svg"
}
}
})
]
};
String
If you want access to the class names themselves, you can output a String
module as an escape hatch:
module.exports = {
plugins: [
require("tailwindcss"),
require("postcss-elm-tailwind")({
tailwindConfig: "./tailwind.config.js",
elmFile: "src/Tailwind.elm",
elmModuleName: "Tailwind",
formats: {
string: {
elmFile: "src/Tailwind/String.elm",
elmModuleName: "Tailwind.String"
}
}
})
]
};
Other things to note
In order to get a small build, you’ll need to build Tailwind twice - once
without purgecss to build TW.elm
with all the classes and once with purgecss
so that all the unused classes are removed from your production CSS.
See how this is implemented in the demo.