{"id":15467534,"url":"https://github.com/matheus23/elm-tailwind-modules","last_synced_at":"2025-09-06T19:32:39.511Z","repository":{"id":38192133,"uuid":"288528508","full_name":"matheus23/elm-tailwind-modules","owner":"matheus23","description":"Generate Elm code for Tailwind Utilities and Components that purges using Elm's dead code elimination!","archived":false,"fork":false,"pushed_at":"2023-04-12T14:14:27.000Z","size":20789,"stargazers_count":119,"open_issues_count":5,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-30T16:37:27.749Z","etag":null,"topics":["css","elm","elm-css","tailwind"],"latest_commit_sha":null,"homepage":"https://matheus23.github.io/elm-tailwind-modules/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matheus23.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-18T18:05:50.000Z","updated_at":"2025-03-14T02:49:50.000Z","dependencies_parsed_at":"2024-06-18T21:20:04.719Z","dependency_job_id":"786149d0-f9b7-4b19-89dc-1928fa1d0e8b","html_url":"https://github.com/matheus23/elm-tailwind-modules","commit_stats":{"total_commits":259,"total_committers":8,"mean_commits":32.375,"dds":"0.27413127413127414","last_synced_commit":"518b7e608d8d5a36e3b837180cca7d1bc16d0dd1"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheus23%2Felm-tailwind-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheus23%2Felm-tailwind-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheus23%2Felm-tailwind-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheus23%2Felm-tailwind-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matheus23","download_url":"https://codeload.github.com/matheus23/elm-tailwind-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248095272,"owners_count":21046821,"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":["css","elm","elm-css","tailwind"],"created_at":"2024-10-02T01:22:41.570Z","updated_at":"2025-04-09T19:21:40.317Z","avatar_url":"https://github.com/matheus23.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elm Tailwind Modules\n\n\u003e Generate Elm code for Tailwind Utilities and Components which purges using Elm's dead code elimination!\n\u003e\n\u003e Use [Tailwind](https://tailwindcss.com/) with [Elm-Css](https://github.com/rtfeldman/elm-css)!\n\n## Quick Start\n\nIf you want to try out how using elm-css with tailwind feels like **without using npm**, try out the package with prebuilt modules: [elm-default-tailwind-modules](https://package.elm-lang.org/packages/matheus23/elm-default-tailwind-modules/latest/)\n\n## Install\n\n``` sh\n$ npm i --save-dev elm-tailwind-modules tailwindcss postcss\n$ npx elm-tailwind-modules --dir ./gen\nSaved\n - gen/Tailwind/Utilities.elm\n - gen/Tailwind/Theme.elm\n - gen/Tailwind/Breakpoints.elm\n$ elm install rtfeldman/elm-css\n$ elm install matheus23/elm-tailwind-modules-base # used by the generated code internally\n```\n\nThis will generate these files:\n\n* [`gen/Tailwind/Utilities.elm`](https://github.com/matheus23/elm-tailwind-modules/blob/master/docs/example/Tailwind/Utilities.elm)\n* [`gen/Tailwind/Theme.elm`](https://github.com/matheus23/elm-tailwind-modules/blob/master/docs/example/Tailwind/Theme.elm)\n* [`gen/Tailwind/Breakpoints.elm`](https://github.com/matheus23/elm-tailwind-modules/blob/master/docs/example/Tailwind/Breakpoints.elm)\n\n## Use\n\nNow you simply import these modules and use them in your elm code:\n\n``` elm\nimport Css\nimport Css.Global\nimport Html.Styled as Html\nimport Html.Styled.Attributes as Attr\nimport Tailwind.Breakpoints as Breakpoints\nimport Tailwind.Utilities as Tw\nimport Tailwind.Theme as Tw\n\n\nmain =\n    Html.toUnstyled \u003c|\n        Html.div [ Attr.css [ Tw.bg_color Tw.gray_50 ] ]\n            [ -- This will give us the standard tailwind style-reset as well as the fonts\n              Css.Global.global Tw.globalStyles\n            , Html.div\n                [ Attr.css\n                    [ Tw.mt_8\n                    , Tw.flex\n\n                    -- We use breakpoints like this\n                    -- However, you need to order your breakpoints from high to low :/\n                    , Breakpoints.lg [ Tw.mt_0, Tw.flex_shrink_0 ]\n                    ]\n                ]\n                [ Html.div [ Attr.css [ Tw.inline_flex, Tw.rounded_md, Tw.shadow ] ]\n                    [ Html.a\n                        [ Attr.css\n                            [ Tw.inline_flex\n                            , Tw.items_center\n                            , Tw.justify_center\n                            , Tw.px_5\n                            , Tw.py_3\n                            , Tw.border\n                            , Tw.border_color Tw.transparent\n                            , Tw.text_base\n                            , Tw.font_medium\n                            , Tw.rounded_md\n                            , Tw.text_color Tw.white\n                            , Tw.bg_color Tw.indigo_600\n\n                            -- We can use hover styles via elm-css :)\n                            , Css.hover [ Tw.bg_color Tw.indigo_700 ]\n                            ]\n                        , Attr.href \"#\"\n                        ]\n                        [ Html.text \"Get started\" ]\n                    ]\n                ]\n            ]\n```\n\nThe result looks like this:\n\n![Screenshot](https://raw.githubusercontent.com/matheus23/elm-tailwind-modules/master/test-example/result.png)\n\n(For a bigger example, see [test-example/src/Main.elm](https://github.com/matheus23/elm-tailwind-modules/blob/master/test-example/src/Main.elm) and related files.)\n\n## CLI\n\n``` \n\n$ elm-tailwind-modules --help\nUsage: elm-tailwind-modules [options]\n\nOptions:\n  -V, --version             output the version number\n  --dir \u003cdir\u003e               destination folder for generated elm modules, e.g. \"src/\" or \"gen/\". Add this folder to your elm.json\n                            source-directories.\n  --module-name \u003cname\u003e      module name prefix for generated elm modules, e.g. \"Tailwind\" or \"Css.Gen\"\n  --tailwind-config \u003cfile\u003e  your tailwind config file (default: null)\n  -h, --help                display help for command\n```\n\n## Nodejs API\n\nThis package is written in typescript, so you can use it from node via the same npm package, too.\n\nThe nodejs API allows you to do more stuff, for example, include additional postcss plugins like autoprefixer.\n\nIt boils down to this:\n\n``` js\nconst elmTailwindModules = require(\"elm-tailwind-modules\");\nconst tailwindConfig = require(\"./my-tailwind.js\");\nconst autoprefixer = require(\"autoprefixer\");\n\nelmTailwindModules.run({\n    directory: \"./gen\",\n    moduleName: \"Tailwind\",\n    postcssPlugins: [autoprefixer],\n    tailwindConfig,\n});\n```\n\n### Full control\n\nIf you need _even more_ control, you can integrate `elm-tailwind-modules` with your existing postcss pipeline by using it as a postcss plugin.\n\nBelow is an example of using `elm-tailwind-modules`  `asPostcssPlugin` function to get following control:\n\n* Providing your own postcss file to consume\n* Adding the `postcss-import` plugin at the start of your postcss pipeline\n* Writing css that wasn't turned into elm definitions back as a css file\n\n  \n  (This can be useful, as the generated `globalStyles` definition has its limits, for example you can't use `@font-face` in elm-css.)\n\n``` js\nconst elmTailwindModules = require(\"elm-tailwind-modules\");\nconst tailwindConfig = require(\"./my-tailwind.js\");\nconst autoprefixer = require(\"autoprefixer\");\nconst postcssImport = require(\"postcss-import\");\nconst postcss = require(\"postcss\");\nconst tailwindcss = require(\"tailwindcss\");\nconst fs = require(\"fs\").promises;\n\nconst logFunction = message =\u003e console.log(message);\n\nconst moduleName = \"Tailwind\";\n\nconst elmTailwindModulesPlugin = elmTailwindModules.asPostcssPlugin({\n    moduleName,\n    tailwindConfig,\n    generateDocumentation: true,\n    logFunction,\n    modulesGeneratedHook: async generated =\u003e elmTailwindModules.writeGeneratedFiles({\n        directory: \"gen\",\n        moduleName,\n        logFunction,\n        generated\n    })\n});\n\n// This file has the postcss superpowers. So it includes things like\n// * @tailwind base; @tailwind components; @tailwind utilities;\n// * postcss-import's @import\n// * tailwindcss' @apply\nconst inputCssFile = \"./my-postcss.css\";\n\n// This file will contain basic css that every browser understands\nconst outputCssFile = \"./build/stylesheet.css\";\n\n(async () =\u003e {\n    const inputCss = await fs.readFile(inputCssFile, {\n        encoding: \"utf8\"\n    });\n\n    const result = await postcss.default([\n        // We can specify our own order of postcss plugins.\n        postcssImport,\n        tailwindcss(tailwindConfig),\n        autoprefixer,\n        elmTailwindModulesPlugin\n    ]).process(inputCss, {\n        from: inputCssFile,\n        to: outputCssFile,\n    });\n\n    logFunction(`Saving remaining global css to ${outputCssFile}`);\n    await fs.writeFile(outputCssFile, result.content);\n})()\n```\n\n### Node API Documentation\n\nYou can find the documentation at [matheus23.github.io/elm-tailwind-modules](https://matheus23.github.io/elm-tailwind-modules/modules.html#run).\n\n## Comparisons\n\n* [monty5811/postcss-elm-tailwind](https://github.com/monty5811/postcss-elm-tailwind):\n  + You still need to include a `.css` file\n  + You need to purge the `.css` file (which is a somewhat involved process, including having to run postcss twice)\n  + The generated files contain a definition for all variants, which makes them much bigger (150+kLOC vs. 30+kLOC)\n  + Has more configuration options\n  + More mature and robust\n* Using classes via tailwind directly:\n  + No type checking (typos might not get noticed)\n  + global namespaces for classes\n\nSo mainly, the cool things about this package are:\n\n* You can use elm-css with tailwind. So:\n  + No writing css by hand\n  + No global css class namespaces\n  + All the features of tailwindcss, its plugins and ecosystem\n  + Simply import some elm files after generating them, and they're all you need\n\n## Acknowledgements\n\nThe idea for this is not original. It's a fork from [justinrassier/postcss-elm-css-tailwind](https://github.com/justinrassier/postcss-elm-css-tailwind). Thanks!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheus23%2Felm-tailwind-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatheus23%2Felm-tailwind-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheus23%2Felm-tailwind-modules/lists"}