ProductPromotion
Logo

Elm

made by https://0x3d.site

GitHub - monty5811/postcss-elm-tailwind: put some tailwind in your elm
put some tailwind in your elm. Contribute to monty5811/postcss-elm-tailwind development by creating an account on GitHub.
Visit Site

GitHub - monty5811/postcss-elm-tailwind: put some tailwind in your elm

GitHub - monty5811/postcss-elm-tailwind: put some tailwind in your elm

postcss-elm-tailwind

tailwind + elm = :rocket:

See the demo and repo.

Actions Status

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 "+" ]
            ]
        ]

Installation

yarn add postcss-elm-tailwind --dev

# OR

npm i -D postcss-elm-tailwind

Usage

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("postcss-elm-tailwind")({
      tailwindConfig: "./tailwind.config.js", // tell us where your tailwind.config.js lives
      // only the tailwindConfig key is required, the rest are optional:
      elmFile: "src/Tailwind.elm", // change where the generated Elm module is saved
      elmModuleName: "Tailwind", // this must match the file name or Elm will complain
      nameStyle: "snake", // "snake" for snake case, "camel" for camel case
      splitByScreens: true // generate an Elm module for each screen
    })
  ]
};

See the demo for a full example.

Other output formats

SVG

If you want to use Tailwind classes to style SVG you can output an Svg module like this:

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.

More Resources
to explore the angular.

mail [email protected] to add your project or resources here ๐Ÿ”ฅ.

Related Articles
to learn about angular.

FAQ's
to learn more about Angular JS.

mail [email protected] to add more queries here ๐Ÿ”.

More Sites
to check out once you're finished browsing here.

0x3d
https://www.0x3d.site/
0x3d is designed for aggregating information.
NodeJS
https://nodejs.0x3d.site/
NodeJS Online Directory
Cross Platform
https://cross-platform.0x3d.site/
Cross Platform Online Directory
Open Source
https://open-source.0x3d.site/
Open Source Online Directory
Analytics
https://analytics.0x3d.site/
Analytics Online Directory
JavaScript
https://javascript.0x3d.site/
JavaScript Online Directory
GoLang
https://golang.0x3d.site/
GoLang Online Directory
Python
https://python.0x3d.site/
Python Online Directory
Swift
https://swift.0x3d.site/
Swift Online Directory
Rust
https://rust.0x3d.site/
Rust Online Directory
Scala
https://scala.0x3d.site/
Scala Online Directory
Ruby
https://ruby.0x3d.site/
Ruby Online Directory
Clojure
https://clojure.0x3d.site/
Clojure Online Directory
Elixir
https://elixir.0x3d.site/
Elixir Online Directory
Elm
https://elm.0x3d.site/
Elm Online Directory
Lua
https://lua.0x3d.site/
Lua Online Directory
C Programming
https://c-programming.0x3d.site/
C Programming Online Directory
C++ Programming
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
R Programming
https://r-programming.0x3d.site/
R Programming Online Directory
Perl
https://perl.0x3d.site/
Perl Online Directory
Java
https://java.0x3d.site/
Java Online Directory
Kotlin
https://kotlin.0x3d.site/
Kotlin Online Directory
PHP
https://php.0x3d.site/
PHP Online Directory
React JS
https://react.0x3d.site/
React JS Online Directory
Angular
https://angular.0x3d.site/
Angular JS Online Directory