{"id":13394225,"url":"https://github.com/monty5811/postcss-elm-tailwind","last_synced_at":"2025-08-19T21:31:22.504Z","repository":{"id":35201212,"uuid":"216766035","full_name":"monty5811/postcss-elm-tailwind","owner":"monty5811","description":"put some tailwind in your elm","archived":false,"fork":false,"pushed_at":"2022-12-10T06:28:08.000Z","size":1203,"stargazers_count":98,"open_issues_count":7,"forks_count":16,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-11T21:40:03.612Z","etag":null,"topics":["elm","postcss","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monty5811.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["monty5811"]}},"created_at":"2019-10-22T08:46:57.000Z","updated_at":"2024-05-02T10:48:44.000Z","dependencies_parsed_at":"2023-01-15T16:02:01.274Z","dependency_job_id":null,"html_url":"https://github.com/monty5811/postcss-elm-tailwind","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monty5811%2Fpostcss-elm-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monty5811%2Fpostcss-elm-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monty5811%2Fpostcss-elm-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monty5811%2Fpostcss-elm-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monty5811","download_url":"https://codeload.github.com/monty5811/postcss-elm-tailwind/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230367928,"owners_count":18215338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","postcss","tailwindcss"],"created_at":"2024-07-30T17:01:13.080Z","updated_at":"2024-12-19T03:08:08.643Z","avatar_url":"https://github.com/monty5811.png","language":"JavaScript","funding_links":["https://github.com/sponsors/monty5811"],"categories":["JavaScript","Code generators"],"sub_categories":["Individual Podcast episodes"],"readme":"# postcss-elm-tailwind\n\n[tailwind](https://tailwindcss.com) + [elm](http://elm-lang.org) = :rocket:\n\nSee the [demo](https://postcss-elm-tailwind-demo.onrender.com/) and [repo](https://github.com/monty5811/postcss-elm-tailwind/tree/master/demo).\n\n[![Actions Status](https://github.com/monty5811/postcss-elm-tailwind/workflows/Node%20CI/badge.svg)](https://github.com/monty5811/postcss-elm-tailwind/actions)\n\n```elm\nview : Model -\u003e Html Msg\nview model =\n    Html.div [ TW.h_screen, TW.w_screen, TW.flex, TW.justify_center, TW.items_center, TW.bg_gray_200 ]\n        [ Html.div []\n            [ Html.button\n                [ E.onClick Decrement\n                , TW.px_2\n                , TW.px_4\n                , TW.text_white\n                , TW.bg_blue_500\n                , TW.w_full\n                ]\n                [ Html.text \"-\" ]\n            , Html.div\n                [ TW.text_2xl\n                , TW.text_center\n                , TW.my_4\n                ]\n                [ Html.text (String.fromInt model) ]\n            , Html.button\n                [ E.onClick Increment\n                , TW.px_2\n                , TW.px_4\n                , TW.text_white\n                , TW.bg_blue_500\n                , TW.w_full\n                ]\n                [ Html.text \"+\" ]\n            ]\n        ]\n```\n\n## Installation\n\n```\nyarn add postcss-elm-tailwind --dev\n\n# OR\n\nnpm i -D postcss-elm-tailwind\n```\n\n## Usage\n\n```js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss\"),\n    require(\"postcss-elm-tailwind\")({\n      tailwindConfig: \"./tailwind.config.js\", // tell us where your tailwind.config.js lives\n      // only the tailwindConfig key is required, the rest are optional:\n      elmFile: \"src/Tailwind.elm\", // change where the generated Elm module is saved\n      elmModuleName: \"Tailwind\", // this must match the file name or Elm will complain\n      nameStyle: \"snake\", // \"snake\" for snake case, \"camel\" for camel case\n      splitByScreens: true // generate an Elm module for each screen\n    })\n  ]\n};\n```\n\nSee the [demo](https://github.com/monty5811/postcss-elm-tailwind/tree/master/demo) for a full example.\n\n### Other output formats\n\n#### SVG\n\nIf you want to use Tailwind classes to style `SVG` you can output an `Svg` module like this:\n\n```js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss\"),\n    require(\"postcss-elm-tailwind\")({\n      tailwindConfig: \"./tailwind.config.js\",\n      elmFile: \"src/Tailwind.elm\",\n      elmModuleName: \"Tailwind\",\n      formats: {\n        svg: {\n          elmFile: \"src/Tailwind/Svg.elm\",\n          elmModuleName: \"Tailwind.Svg\"\n        }\n      }\n    })\n  ]\n};\n```\n\n#### String\n\nIf you want access to the class names themselves, you can output a `String` module as an escape hatch:\n\n```js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss\"),\n    require(\"postcss-elm-tailwind\")({\n      tailwindConfig: \"./tailwind.config.js\",\n      elmFile: \"src/Tailwind.elm\",\n      elmModuleName: \"Tailwind\",\n      formats: {\n        string: {\n          elmFile: \"src/Tailwind/String.elm\",\n          elmModuleName: \"Tailwind.String\"\n        }\n      }\n    })\n  ]\n};\n```\n\n## Other things to note\n\nIn order to get a small build, you'll need to build Tailwind twice - once\nwithout purgecss to build `TW.elm` with all the classes and once with purgecss\nso that all the unused classes are removed from your production CSS.\nSee how this is implemented in the [demo](https://github.com/monty5811/postcss-elm-tailwind/blob/master/demo/package.json#L22).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonty5811%2Fpostcss-elm-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonty5811%2Fpostcss-elm-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonty5811%2Fpostcss-elm-tailwind/lists"}