DEV Community

Cover image for Start Using Tailwind CSS Right Now

Start Using Tailwind CSS Right Now

Shubham Patil on October 03, 2021

I've been using Tailwind CSS for the past 4 months now, and I can confidently say that it's much much MUCH better than plain CSS. If you didn't kn...
Collapse
 
punyflash profile image
Dmytro Morozov

I highly disagree that tailwind is better then plain CSS. The one line long strings was never good to work with in a long term. Tailwind just gives freedom for developers to write an unsupportable designs. Once it done - no one will be able to add changes to it. For personal projects it is fine, but never use tailwind when you working in team.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Frameworks like tailwind have their place in prototyping, specially by people who don't know and don't want to learn CSS, like backend people that just want a quick front-end for their application, or front-end people that specialize more on the javascript side.

The problem is that tailwind specifically moves away from those use-cases by not providing finished styles for certain components like "buttons" or "grids" but instead tries to provide a direct mapping from classes to css attributes, thereby offering the advantages of neither approach.

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

I think even tailwind is for backend people to much the would use something like bootstrap which has already a design. With tailwind backend people would be as fast as with css.

Collapse
 
lil5 profile image
Lucian I. Last

Once it done - no one will be able to add changes to it.

That seems like a strange prognosis, for example: say a class is created 'button' and then with the apply function certain tailwind classes are added, how difficult would it be to remove the class 'mb-2' (from \@apply) and add a newly created class 'mb-7-px'?

How readable is the class mb-7-px?

Is it really that difficult or is it just different?

Collapse
 
shubhampatilsd profile image
Shubham Patil

Hi I'm the author of the article here! Tailwind definitely has its own advantages. One thing I might have left out is the customization that CSS offers. My main goal was to outline how Tailwind might be good in cases where you want to write CSS much faster and efficiently. CSS does offer more flexibility, but when you get used to it, it becomes very readable. I do like custom CSS in some cases (eg. customization and certain pseudo selectors) but Tailwind makes styling stuff really fast. I wish you a good day!

Collapse
 
hudsonxp80 profile image
hudsonxp80

You can still extract components which is very similar to writing css class but much simpler.

Collapse
 
mentoraliu profile image
Mentori

I mean obviously plain CSS is way more flexible but tailwind saves you lot's of time, I personally use bootstrap just for the responsiveness because I hate wasting time with media queries

Collapse
 
andycharles6 profile image
andycharles6

Why no one will be able to add changes?

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

The colors that Tailwind offers are not just CSS colors with fancy names, they are much more appealing.

This really seems like some heavy mental gymnastics to argue against vanilla CSS. In reality, CSS gives you a multitude of tools to define the colours you want for your design, whereas frameworks like tailwind only provide a very limited palette of pre-built colours.

Collapse
 
lil5 profile image
Lucian I. Last

I suggest you read a little bit into the documentation concerning 'tailwind.config.js'

tailwindcss.com/docs/configuration

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

The mental gymnastics continues. I just don't get why people are so opposed to simply learning CSS instead of finding all these excuses to dump all of the styling in the markdown like it's 1990 or something.

Thread Thread
 
lil5 profile image
Lucian I. Last

Because naming is hard, less names written less time lost on frivolous names.

Thread Thread
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Naming is only hard when you're not really sure what it is you're naming

Thread Thread
 
eternalmoon1234 profile image
Gautam

Learning CSS first is obviously a necessity, however Tailwind can help in writing frontend much faster. When using plain CSS, I've found that I am much less productive, spending time switching between files and editing. Tailwind can look pretty messy, but if your team knows it, I've found that it speeds up writing frontend very significantly.

Collapse
 
victorocna profile image
Victor Ocnarescu

I highly agree that tailwind is better than plain CSS. But where it truly shines is when the whole team uses it. When I was reviewing code in the past I always thought: what the heck does that container class actually do? Now using tailwind me and my team have a common understanding of CSS right from the HTML.

Sure, in some cases I still write semantic CSS like .author-bio or .button, but in 95% of the cases we use tailwind. An extraordinary CSS framework that works great for teams.

Collapse
 
camco profile image
Camco

Reading the comments here... The first thing I thought of is
"Front end devs argue about language vs frameworks too?"

Any dev with crossover experience knows that those who argue about language over framework, like don't have much experience as it's always an argument from a place of ignorance.

Tailwind is awesome, and doesn't replace CSS

Vanilla CSS is awesome.

Both can be true.

Collapse
 
collimarco profile image
Marco Colli

I really like the design of Tailwind website and sometimes I take inspiration from their CSS code... Nothing more. IMHO Tailwind can't be used for a serious project, it creates too much pollution in the markup, it's not semantic, there's too much duplication (not DRY), and it's hard to maintain... and if you use @apply then you can just use normal CSS that will be supported forever, unlike frameworks.

Collapse
 
dcruz1990 profile image
Dennis Quesada Cruz

Kindly disagree, its depends on how you organize your styles, if you have strong directives in your team, everything should flow normally.

Collapse
 
facundocorradini profile image
Facundo Corradini • Edited

"It is noticeable that Tailwind's colors are much more soothing and are less harsh than the base CSS colors"

What's stopping you from declaring color: #1D4ED8 in your plain CSS???

Tailwind provides great pre-vetted choices, and allows you to automagically generate more in the config, which is great. But it's still an abstraction layer on top of CSS.

And one that's simply not compatible with the intersectional conditional CSS that's coming up next. Tailwind can become a huge pile of technical debt in the next two years.

Instead of fanboying over a tech we should understand what are the problems they solve and what are the tradeoffs, 'cause there's always tradeoffs.

Collapse
 
adrian154 profile image
adrian

tailwind is a contradictory premise: the flexibility it offers can only be achieved by close to 1:1 parity with the underlying css elements, but at that point they're basically glorified inline styles, which are a classical violation of the central HTML/CSS dogma (namely, separate styles and content!!). IMHO tailwind has no place in serious web development projects

Collapse
 
andycharles6 profile image
andycharles6

There is no thing called CSS colors. Its a hex code that you write to get colors

Collapse
 
shubhampatilsd profile image
Shubham Patil

This is true but the base colors that CSS offers (without manual input of a hex code) are harsher than Tailwind's default selections. Thanks for the input though!

Collapse
 
andycharles6 profile image
andycharles6

What are the base colors CSS offers?

Thread Thread
 
shubhampatilsd profile image
Shubham Patil

Like the colors such as blue and red

Thread Thread
 
andycharles6 profile image
andycharles6 • Edited

Those are shorthands to define a color and not the default colors.

Also what tailwind gives is a color palette that gets converted to css classes behind the scenes.

You can get color palettes with CSS code from many websites.

Overall, people who never have written CSS simply doesn't know what is CSS, they just see a popular library and then attempt to become a teacher by teaching wrong things and the cycle continues

Thread Thread
 
shubhampatilsd profile image
Shubham Patil

yes but those color palettes require extra steps to setup, while Tailwind offers a great selection out of the box.

Thread Thread
 
andycharles6 profile image
andycharles6

What extra steps does it require? Copy/Paste from a website?

From that logic, TailwindCSS requires extra installation step too

Collapse
 
shubhampatilsd profile image
Shubham Patil

That's true but with Tailwind there's no additional setup required for colors to use them. In CSS you would have to organize them into variables and that's another step required to use those colors in CSS. I think the meaning of color is differing from reader to reader. I meant the default colors (like blue-400, green-200) that Tailwind gives :)

Collapse
 
eternalmoon1234 profile image
Gautam

Tailwind is definitely one of the best frontend tools I have used. Although the code may seem unreadable and uneditable, if you know Tailwind, it's actually very easy to read, and edit. Tailwind has helped me write frontend faster, and has saved a lot of time and switching between files.

Collapse
 
mentoraliu profile image
Mentori

I mainly use Bootstrap for the time saving responsiveness, have you used bootstrap and how does it compare to tailwind ?

Collapse
 
eternalmoon1234 profile image
Gautam

I've used bootstrap, it's relatively good to get a website set up quickly, but you are unable to custom-style your website. On the other hand, Tailwind has a lower-level API allowing you to style your websites in any way you would like.

Thread Thread
 
mentoraliu profile image
Mentori

can you combine bootstrap with tailwind, and get best of both worlds? lets say bootstrap for responsiveness and tailwind for styling

Collapse
 
mike_andreuzza profile image
Michael Andreuzza

not even Adam Watham recommends to use @apply.. .

Collapse
 
opensas profile image
opensas

I read such thing a couple times but couldn't find where he said such a thing. Do hoy have a link so I can read a bit more about it?

Collapse
 
mike_andreuzza profile image
Michael Andreuzza
Thread Thread
 
opensas profile image
opensas

thanks! I guess this should also appear in tailwind's doc.

Thread Thread
 
mike_andreuzza profile image
Michael Andreuzza

haven't seen it...

Thread Thread
 
opensas profile image
opensas

I mean, it's not in the docs, but it should be.

Collapse
 
hlship profile image
Howard M. Lewis Ship • Edited

Having just started with Tailwind on a personal project, I really like it's pragmatic approach; Tailwind is stripping away a layer of abstraction that works hard against me in trying to create and manage my layout.

Tailwind's "utility-first" approach means that you are rejecting semantic styling in favor of a very in-your-face pragmatic (if verbose, with caveats) direct description of the design, layout, and (some parts of) behavior of your elements.

This is very much inline with Simple Made Easy in my mind. I'll trade opaque abstracts for verbosity nearly every time (especially when, as here, there's a mechanism to reduce that verbosity when needed).

What isn't in the discussion so far is the Node-based tooling; tailwind can be configured to watch your source files; it picks out the class names it defines that your code actually uses, and only those go into the output CSS (which is regenerated as files change). This carries through into production, so it means that the final CSS is small.

I've definitely been in projects where the use of a CSS class name drifted from its original semantic meaning, resulting in the class being locked forever, for fear of changing something elsewhere in the app without meaning too; this certainly results in CSS bloat. I've also seen cases where the volume of semantic names was too great, so that the names became nearly meaningless.

We'll see if my mind changes as I use it more, but my sense for it is quite positive.

Collapse
 
kolja profile image
Kolja

Yesterday I used Tailwind for the first time and am trying to understand more of the principle of run dev and run build. Actually I thought that with TW during development all CSS properties are written as a class in the HTML tag, because it's easy and fast and during compilation everything is combined into bigger classes (as far as possible). So I was a bit disappointed after my first build and have to say that now I don't quite understand why TW is so highly praised, since it leaves tons of duplicate code in the final version of the website. From the article I now know the possibility of @apply, but that goes then already back to the "old" way. So TW is for me (until now) not much more than inline CSS with predefined colors. (but which are really nicer than the named colors from vanilla CSS).

Collapse
 
acidlake profile image
Jeremias Nunez

Great post, our team have been using tailwind since 1 year, and is better since JIT very fast reload on build, checking the comments i must say, that people can use just css a framework or both, no need to argue that much, use whatever tool you like, what works for you, it may not work for others.

Collapse
 
lil5 profile image
Lucian I. Last

Great post, I am always surprised of the pushback tailwindcss receives.

Collapse
 
thepeoplesbourgeois profile image
Josh

Protanopia-haver here: Just wanted to say that all of the swatches for Indigo and Purple are 100% identical to the swatches for Blue to my dumb, bad-at-seeing-red eyes.

Collapse
 
alexkarpen profile image
alexkarpen • Edited

Tailwind is perfect for team projects. I read that some people say it is for personal projects only. Web development now is component based that's why tailwind is perfect. Tailwind cannot replace CSS it's an accelerator to write fast CSS that you already know.
Everything i say is up for debate.

Collapse
 
mahmoudalaskalany profile image
Mahmoud Alaskalany

one big issue for tailwind it make project size larger and live reloading take more time
tried it with ionic and remove it it invrease the reload time by 3 or 4 seconds on my powerfull machine

Collapse
 
dcruz1990 profile image
Dennis Quesada Cruz

As others have said, i kindly disagree that it replace plain CSS, Tailwind is a utility tool, its output, in the end,goes to plain CSS.

Collapse
 
shubhampatilsd profile image
Shubham Patil

True but I feel like it makes writing CSS faster and easier to style

Collapse
 
sanspapyrus683 profile image
SansPapyrus683

oh my god hi shubham

Collapse
 
shubhampatilsd profile image
Shubham Patil

hello there!

Collapse
 
xdabier profile image
Xdabier

It's just last night I started a new client's project using Angular + tailwind, and I can confirm that I am loving the experience so far!

Collapse
 
shubhampatilsd profile image
Shubham Patil

Hello everyone so now I have a Twitter. It would be awesome if you could follow me at twitter.com/ShubhamPatilsd!