DEV Community


Discussion on: Love At Second Sight With TailwindCSS

rixcy profile image
Rick Booth

I've been using tailwindcss for the last few months and can honestly say it's my favourite css 'framework' so far. Having everything available for creating apps from the ground up straight out of the box, including all the media queries and variants like focus/hover etc.

Tailwindcss was recently updated which came with quite a few changes for stuff like colours and key names - worth checking out this if you stumble across any older tutorials for tailwindcss and are wondering why stuff isn't working when using the latest version :)

Also, due to the vast amount of utilities and variations, out of the box Tailwind is pretty large, 58.8kb gzipped compared to Bootstrap's 22.7kb or Bulma's 23kb. There's a guide here for controlling file size. I've used purgecss with my Vue apps and have had great results with reducing file size for production (just make sure it's only enabled for production, otherwise every time you're hot reloading in a development environment you'll need to rebuild the whole thing which can take a little bit of time)

lauragift21 profile image
Gift Egwuenu Author

Hey Rick! I know right I love it too. I also saw the recent update and tried out a few things.

Also on the part of controlling sizes, I used purgecss while testing it out and it reduces it to less than 3kb which is pretty awesome.

Forem Open with the Forem app