How do you use TailwindCSS?
Tailwind is great (I think most of us agree on this). But how do you use it in your day-to-day projects?
👉 Do you use it in combination with a CSS-in-JS library (e.g. stitches, Styled Components, Emotion)? Do you use twin.macro for that?
👉 Do you use Tailwind with HeadlessUI (http://headlessui.dev/) or without? (Disclaimer: I love headless and it changed the way I write code. Checkout the Tailwind YouTube channel if you haven‘t heard of it)
👉 Did you buy TailwindUI or another UIKit or does you/your team has their own UIKit built upon Tailwind?
With you all the best
Dennis (dennis_zoma on Twitter)
🤗
Trending on Indie Hackers
I extract common components like buttons, forms, v.v.v to a plugin ... wrap it in the framework you use and customize them with utility classes ... Using class packages (like clsx, classnames) and make sure that one line has no more than 5 classes and group related classes together (like flex items-center and bg-red-500 text-white) ... I created a library for ease of installation in my side project ... take a look if you want https://github.com/vechai/vechaiui
I'm also pretty interested in this!
I rolled my own super-lightweight accessible framework on top of Tailwind with https://www.npmjs.com/package/clsx in order to keep my bundle size super tiny, but a lot of the implementations that involve a lot of different prop "combinations" (e.g. a button that has an outline vs. raised variant a la Material Design, or color combinations) become really messy and I'm not super happy with the implementation.
I hadn't heard of any of the tools you mentioned here (other than TailwindUI) and will definitely check them out for my next project.
Thanks for the post! What's worked for you in the past?
That's a pretty cool library. Thanks for the comment!
I bought Tailwind UI and even though it might seem pricey, it's worth the money !
I also create components that are missing, or try finding something close on https://tailwindcomponents.com/components and modify it.
I just use tailwind with
https://headlessui.dev/
https://tailblocks.cc/
https://devdojo.com/tails/app#_
It has been great so far.
Haven't used it yet, but seriously considering it for some expansions. For the marketing pages everything looks pretty simple to setup, and planning on using Tails to drag-and-drop build. Wish tails just exported JSX though instead of HTML.
I use https://github.com/tw-in-js/twind for 13kb I get access to everything in Tailwind without any of the stress.
I also have added components using apply like .btn .btn-primary and even .bg-primary-50.
This makes me extremely productive when working on multiple projects.
I can copy code from one project and it will magically work on other projects with the correct colors unlike if you used say bg-blue-500.
Is twind still relevant now that Tailwind has a JIT mode? Being able to directly reuse classes from project to project seems nice, but isn't it (almost) a matter of reusing your tailwind config file?
Tailwind JIT doesn't work with a lot of frameworks (Create react app etc).
Also for large sites Tailwind JIT css will be larger than Twind and continue to grow infinitely.
"but isn't it (almost) a matter of reusing your tailwind config file?"
Yep. But if you use "bg-blue-600" and for another project you have "bg-green-600" you now have to manually each class name.