DEV Community

loading...
Cover image for What's your experience with TailwindCSS?

What's your experience with TailwindCSS?

madza profile image Madza ใƒป1 min read

TailwindCSS has been around for a while (first alpha release back in November 2017) and certainly has got a lot of traction in the front-end scene since then. A couple of days ago v2.0 got released.

Have you built any projects with TailwindCSS? Maybe you even use it daily as your main styling option? Or for you, it has always been just-another-framework not worth being taken too seriously?

Discussion

pic
Editor guide
Collapse
_garybell profile image
Gary Bell

One of my team members evaluated it to see if it was suitable for one of our projects. We came to the conclusion that it's incredibly heavy, and wouldn't give us the performance we desire from the front-end without some additional work, and without PurgeCSS.

Our thoughts were that it might be great for prototyping and getting things demo-ready, but would need to be removed ahead of any go-live or there would be performance issues.

Collapse
thefern profile image
Fernando B ๐Ÿš€

tailwindcss.com/docs/optimizing-fo...

When building for production, you should always use Tailwind's purge option to tree-shake unused styles and optimize your final build size. When removing unused styles with Tailwind, it's very hard to end up with more than 10kb of compressed CSS.

Collapse
_garybell profile image
Gary Bell

That's really handy.

I think we misunderstood what was needed, and then tried to work out how we'd apply it to our application structure. Ultimately we found a different one which would see us through the short-medium term which let us put in only the components we needed.

I'll have to give Tailwind a proper look over on a project at some point. It has the huge bonus of not being Bootstrap.

Collapse
justaashir profile image
Aashir Aamir Khan

It can be the lightest CSS file you've ever put to production because of the tailwind.
Purgecss is built-in now, and pretty easy to use. You'll end up having 10kb minified even if you go heavy.

Collapse
_garybell profile image
Gary Bell

Thanks. I think I was just misunderstanding what was needed to get it to a sensible size

Collapse
marcellothearcane profile image
marcellothearcane

It comes with purgeCSS built in, and once it's set up you don't have to worry about it.

Collapse
_garybell profile image
Gary Bell

Thanks. I think I was just misunderstanding what was needed to get it to a sensible size

Collapse
soorajsnblaze333 profile image
Sooraj

Check out this cool library my friend built using tailwind. Had loads of fun contributing to this library. It has out of the box ready to use components built using tailwind.

GitHub logo praveenjuge / kutty

Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.

Kutty

Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.

Version 0.4 works for Tailwind 2, use version 0.3.5 for Tailwind 1 support. Click here for an upgrade guide

Installation

npm install kutty --save
Enter fullscreen mode Exit fullscreen mode

This plugin requires Tailwind CSS 1.9 or later. Tailwind CSS is not included in this package. Learn how to install tailwind here.

Usage

For CSS

Require the installed plugin directly to your Tailwind config:

// tailwind.config.js
plugins: [require("kutty")],
Enter fullscreen mode Exit fullscreen mode

For JS

We bundle AlpineJS v2.6.0 for reactivity in our components. Learn more about AlpineJS here. Place the following script tag before the closing body tag.

<!-- All components in one -->
<script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/kutty.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
<!-- Single component -->
<!-- Include AlpineJS first -->
<script
โ€ฆ
Enter fullscreen mode Exit fullscreen mode
Collapse
bodhiz profile image
bodhiz

Im using TailwindCSS since few months and I almost no more writing any css rules by now. I like the utility first approach that I used already with Bootstrap.
But compared to Bootstrap, I like the fact that it's not coming with pre-defined styled components which are very hard to override. Also tailwind is convenient to extend with custom rules and plugins.
To sum up tailwind will be my css framework of choice for the next few years I think โ˜บ๏ธ

Collapse
iamschulz profile image
I am Schulz

I don't particularly like Tailwind. I find it very clumsy to work with. Making animations feels like a hack. It's hard to work with the cascade and to let elements flow with one another.
We used it in a previous job on a very large website. Having the CSSOM practically duplicated in HTML was a pain in the ass. It bloated up document sizes tremendously.
We stuck with it to give our designers the option to click together components in Figma.

I find the comparison between Tailwind and Bootstrap a bit odd. Those two are trying to solve different problems. Tailwind is a way to write CSS, while Bootstrap is a component library. Not that I like Bootstrap, but I find the way it writes its classes way more straightforward.

Collapse
natetronn profile image
Nathan Doyle

Not worth being taken seriously? That's like saying Bootstrap isn't worth taking seriously. It's definitely something people should take seriously. Does that mean everyone should use it and nothing else, ever? No, of course not. It's a tool, after all and there is room for more than one tool in one's tool belt and room for different tools on other people's belts too. To each their own, that's what I always say.

For me, I really like it a lot. It fits my "style" (pun and no pun intended.) I don't want a CSS framework to make so many decisions for me but, at the same time, I don't want to have to write CSS over and over again, as I've done that before and it's tedious. Tailwind sits in that sweet spot between too much and too little. It's never in the way and at the same time, it's always there for me when I need it, metaphorically speaking, that is.

The complaint I hear the most is "too many classes in the markup." But this is what I love about it. They are right there where they should be, in my opinion. The classes make a lot of sense, too. And I still have the freedom to use as little or as much as I like. If you know CSS you'll learn Tailwind really fast. Plus, the docs are great when you forget something.

I like a blank slate approach and Tailwind respects that.

Does it fit everyone and every project? Of course not. Will I try to use it with a React Native project even though I know I probably shouldn't and realize it may not be the best tool for the job? Of course I will, because I like it and I want to. But that's me, you do you (or what the boss says, I suppose.)

Tailwind 2.0 looks like a really cool release. I read the whole blog post but, haven't tried it. But I already understand what's available and this without even writing code. It's really that simple, once you've learned it (probably take you a day or less to learn it.)

Anyway, give it a real try on a project and enjoy yourself while doing it. Unless you don't enjoy it, then use something else. That's fine too.

Collapse
kwiat1990 profile image
Mateusz Kwiatkowski

Well, I started to use Tailwind recently and I do it mainly with the help of @apply. I think this way of writing classes is better because it doesn't "pollute" HTML with hundreds of classes, which then blow the whole markup. In addition I think it is easier to discover some typo or make a change direct in CSS. But I still use them in HTML, where it makes sens for me.

Generally I think Tailwind with the entire customization and PurgeCSS is a great way to deal with CSS in a project.

Collapse
natetronn profile image
Nathan Doyle

For sure. And with Tailwind v2.0 they've made it easier to do just that:

blog.tailwindcss.com/tailwindcss-v...

Collapse
joachimzeelmaekers profile image
Joachim Zeelmaekers

I use Tailwind for all smaller projects to quickly implement some styles. For me, it offers a quick way to implement a basic style. This basic style has been designed and maintained by many developers, which makes it the perfect framework to use when you don't have a brand yet.

Some clients require you to implement their styleguide, but when they don't Tailwind will give you the perfect framework to create something beautiful. At Craftworkz, we create many prototypes, and I feel like Tailwind can be a great help here. Fast and beautiful.

Certainly something to keep an eye on!

Collapse
dennisfrijlink profile image
Dennis Frijlink

I like TailwindCSS. It's way better than libraries like Bootstrap or Semantic, because it's focused on layout. Despite that I don't use it because of two things:

  1. I like it to write my own (S)CSS
  2. By only using TailwindCSS I will forget how to use CSS or SASS or SCSS So I don't like/recommend working with CSS libraries at all. I write my own reusable sheets like 'columns' or 'viewports', but the main styling is in every web app different.

I also recommend to ALWAYS use PurgeCSS (also without using TailwindCSS)

Collapse
pclundaahl profile image
Patrick Charles-Lundaahl

Well, my only experience with it was being thrown into a project where I had to customize an existing Gatsby site for one-off demos, and on short time frames. After grappling with it a bit, I eventually defaulted to just ripping it out every time I had to work with it.

It seems like it's really effective for fast, greenfield development. However, I found maintaining it to be generally super unpleasant, as I now needed to both a) consider how CSS works, and b) understand the author's personal conventions.

That said, it's extremely popular, so either the hype snowball has reached critical mass, or it genuinely solves real problems for a bunch of people.

Collapse
endymion1818 profile image
Ben Read

My colleague implemented tailwind-like margin / padding in our component library and itโ€™s really improved how we handle components and work with design requirements. Iโ€™m still hesitant about styling my whole application this way but for margin / padding rules thereโ€™s nothing that is more flexible in my opinion.

Collapse
zetareticoli profile image
Francesco Improta

I get inspired by Tailwind but then I prefer creating my own CSS architecture using a mix of some methologies:

  • ITCSS for architecture
  • BEM syntax for naming classes
  • Large use of utilities classes avoiding repetition and specificity
Collapse
bobbyiliev profile image
Bobby Iliev

TailwindCSS is a game changer! Especially now with TailwindCSS 2 out!

Also, I love their new website and how they showcase the framework:

tailwindcss.com/

Collapse
ben profile image
Ben Halpern

Our Forem CSS library is inspired by Tailwinds and I love it...

storybook.forem.com/?path=/story/1...

Collapse
rabin016 profile image
Rabin Chakraborty

For me it's the best one. I wish they could add some important components like model, Dropdown, navbar with mobile screen support something like that