3 ms·
I really like Tailwind but has anyone figured out how to get it to run quickly in development with Webpack? For example Tailwind 2.0 out of the box produces ar
by nickjj 6y ago
I really like Tailwind but has anyone figured out how to get it to run quickly in development with Webpack?
For example Tailwind 2.0 out of the box produces around 3.5mb of CSS and Webpack 5+ on an SSD takes 5+ seconds to start things up. This is a problem with Docker because if your main app container needs to be restart it involves stopping Docker Compose and then upping things. This means your app is delayed 5+ seconds from starting. In production it's no problem with purge CSS and your build step producing the final assets out of band, but I think having a top notch dev experience is really important.
You can do some hacks around how Tailwind imports its fils to make CSS updates happen nearly instantly but the initial Webpack start up time still suffers.
Currently I get around this by enabling Webpack's filesystem cache but this seems like a band-aid solution.
Any suggestions?
On a non-SSD machine I noticed the start up time being 28 seconds btw. It's a non-issue for me but if you want to make open source projects that others use, a ~30 second start up penalty in development is a killer for a pretty large chunk of people.
- dceddia 6y agoI’m not sure if it would fit into your dev stack, but letting Tailwind be handled by a Makefile might help. Or, really, any build tool that can use timestamps to determine if a build is needed. I’ve got a setup like this for a couple Eleventy projects, where it kicks off ‘make’ before starting the dev server. Most of the time, make will finish instantly because I haven’t changed the CSS source. Here’s the file I use in case it helps: https://gist.github.com/dceddia/be4d0f136a340359a57a52f168935f21 https://gist.github.com/dceddia/be4d0f136a340359a57a52f16893...
- nickjj 6y agoThanks. Yeah I was hoping to avoid having to decouple building Tailwind from Webpack as it does complicate the process by a fair bit.