# Generate your Tailwind utilities as elm-css functions

**URL:** <https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076>\
**Category:** Show and Tell\
**Created:** [July 24, 2020, 12:11pm UTC](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076 "2020-07-24T12:11:56Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![creminology](https://avatars.discourse-cdn.com/v4/letter/c/e47774/32.png) [@creminology](https://discourse.elm-lang.org/u/creminology)\
**Post date:** [August 3, 2020, 3:10am UTC](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076/21 "2020-08-03T03:10:41Z")

</div>

> [@justinrassier](#):
>
> That goes for you as well @creminology. I haven’t used Parcel (although I’ve always wanted to try). Any way I can verify that I solve your problem would be great!

I’m actually new to Parcel, and added it because the same `postcss-elm-css-tailwind` project compiled to 48KB with Parcel but 480KB without. The 480KB is from using the predefined `npm run build:elm` script, which does have `optimize` set.

I’ve since dropped Parcel and restarted the project, and it’s indeed a much easier workflow. But I see you’re making changes on Github for a future release to work better with `webpack` and `parcel`.

What are people additionally running to reduce the size of their compiled `js` file without Parcel, etc? I’m surprised that a simple `minimize` step can reduce the code size an additional 90%. I guess it would be a smooth workflow to have it as a build action on Netlify (or Github).

---

<div class="post-metadata">

**Author:** ![justinrassier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/justinrassier/32/3304_2.png) [@justinrassier](https://discourse.elm-lang.org/u/justinrassier)\
**Post date:** [August 3, 2020, 10:46am UTC](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076/22 "2020-08-03T10:46:37Z")

</div>

Whenever I want to spin up a new project, I use [create-elm-app](https://github.com/halfzebra/create-elm-app) which has the dev an prod workflows figured out. Since with that, you don’t really get to modify the build unless you “eject” (which is something I try to avoid) I just hook up `postcss-elm-css-tailwind` as a standalone `npm script` to run before any dev or build step.

That being said, I totally see the need to integrate it with bundlers. I do have a complete [PR out there](https://github.com/justinrassier/postcss-elm-css-tailwind/pull/16) that has some of the configuration asked for earlier, as well as a way to work with bundlers. I only tested with Parcel because I HATE figuring out a fresh webpack.config 🙂 @Philipp_Krueger was going to check out webpack on his spare time.

If you would like, I am fine merging in the configuration PR and fixing Webpack later if somehow my changes work for Parcel but not Webpack. Let me know and I’ll push the merge button!

---

<div class="post-metadata">

**Author:** ![creminology](https://avatars.discourse-cdn.com/v4/letter/c/e47774/32.png) [@creminology](https://discourse.elm-lang.org/u/creminology)\
**Post date:** [August 3, 2020, 10:50am UTC](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076/23 "2020-08-03T10:50:25Z")

</div>

Yeah. Hit merge!

I played briefly with elm-batteries, which uses Parcel, which would be my preferred starter kit for how it integrates with Cyprus for testing. It’s also Tailwind by default.

---

<div class="post-metadata">

**Author:** ![justinrassier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/justinrassier/32/3304_2.png) [@justinrassier](https://discourse.elm-lang.org/u/justinrassier)\
**Post date:** [August 3, 2020, 10:57am UTC](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076/24 "2020-08-03T10:57:01Z")

</div>

Published! 0.5.0 is out there which as the configuration options. Take a look at the [README section for working with bundlers](https://github.com/justinrassier/postcss-elm-css-tailwind#working-with-bundlers)

Let me know if you hit any issue and I’ll see what I can do!

---

<div class="post-metadata">

**Author:** ![justinrassier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/justinrassier/32/3304_2.png) [@justinrassier](https://discourse.elm-lang.org/u/justinrassier)\
**Post date:** [August 7, 2020, 7:48pm UTC](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076/25 "2020-08-07T19:48:44Z")

</div>

Published 0.6.0. I upgraded to support the latest 1.6.x of Tailwind, and also added support for all core plugins. You no longer have to turn off any features out of the box to get a valid Elm compile of your utilities!

Feel free to reach out to me here or on Slack if you have any issues.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [August 17, 2020, 7:48pm UTC](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076/26 "2020-08-17T19:48:46Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

[Previous page](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076.md?page=1)