If you use Tailwind, you might be aware of how the styles are generated by keeping only those ones that are used and discarding all other classes. This helps keeping the bundle size smaller and the website faster. The way Tailwind does this is by searching for class tokens through all the directories listed under the content array in tailwind.config.js and generating styles only for those classes

This is great and all. But, sometimes you might need to use styles that are not available. So, what can you do in that case? Curlwind to the rescue 😎

Here are a couple of use cases as pointed in the tweet and its replies above

  1. If a website does not have a build process or it is a very small site, instead of importing the entire Tailwind stylesheet through its CDN link, only the styles required can be imported. As pointed out in the official docs, Tailwind CDN should not be used on production sites. So, importing only the styles required through can be very helpful
  2. One great use case for this as pointed in this tweet would be whenever we want to generate a PDF. Unfortunately, it is not possible to add Tailwind to PDFs due to the nature of how PDF libraries work. We have to write all styles needed in the PDF ourselves. However, by using the curlwind we can simplify this process and get only the styles needed for PDFs and at the same time keeping the familiar Tailwind class names. It’s a win win
  3. Sometimes, in very niche cases there might arise a need to use dynamic classes. Although it is not recommended to use Tailwind like this as pointed out in the official docs, but if it is a super niche case, curlwind could be of some use here as well

How to get started with Curlwind

Well getting started is very simple. Did I mention that curlwind is a no build tool? So, to get started you can simply use the CDN link provided with the classes you need. For-example

HTML
<link rel="stylesheet" href="https://cdn.curlwind.com?classes=p-*">

You can generate multiple classes by comma separating them

HTML
<link rel="stylesheet" href="https://cdn.curlwind.com?classes=p-*,m-*">

You can also generate the required variants

HTML
<link rel="stylesheet" href="https://cdn.curlwind.com?classes=p-*:sm|md">

And the amazing thing is that these styles are cached, so next time you load the page it returns those styles instantly. Isn’t that just great?

Thanks for reading. Check out the official guide for more. Happy coding 🚀🚀

Tailwind

Tagged in: