DEV Community

Cover image for Tailwind vs Custom CSS: What Should You Choose?

Tailwind vs Custom CSS: What Should You Choose?

Ayush Thakur on October 07, 2024

When building a website, one of the fundamental decisions you’ll face is how to handle your CSS. Should you rely on a utility-first framework like ...
Collapse
 
pengeszikra profile image
Peter Vivo • Edited

My favorite setup is:
<script src="https://cdn.tailwindcss.com"></script>
This one turn any HTML page to tailwind capable, and I can use it without any CSS need.

Which is also means I can focus on HTML DOM structure. In my opinion is the Tailwind greatest strength is the simple layout structure declaration.

for example:

<section class="grid gap-2">
   <h1></h1>
   <p></p>
   <figure></figure>
   <p></p>
   <p></p>
</section>
Enter fullscreen mode Exit fullscreen mode

each parragraph have common distance between, and easy to read.

at the end

Of course, when whole POC work with Tailwind are done, and we are getting the border of capability then good to use some custom CSS well. Can live fine together.

Collapse
 
dami13 profile image
Damian Pasek • Edited

Ok, but it's adding the entire Tailwind script, and if you're using something like Angular, it's better to add the package directly. Tailwind will then include only the utility classes you're actually using.

Collapse
 
davidcmd11 profile image
David Vásquez Pino

Custom CSS, all the life, the rest is bla bla bla bla

Collapse
 
harshg775 profile image
harshG775

Vanilla css for complex styling
Tailwind for fast development

Collapse
 
tomasdevs profile image
Tomas Stveracek

It really depends on the project and the team's choice, but from my perspective, writing custom CSS is becoming less common lately. Many teams now prefer Tailwind or similar frameworks because they speed up development and help maintain consistency. However, it’s still important to choose what works best for your project.

Collapse
 
wizard798 profile image
Wizard

Idk man, but writing custom css is bloated, indeed Tailwind clutters html and there's a solution for it, use @apply directive in css file and use that class names to html

And for your wrong assumption that it has less pre built things, it's the reason that tailwinds is very fast, and if needed extra things then have to extend but a small solution is that using arbitrary css value classes, and other solution is to use custom css with tailwind.

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

At this point, I'm not fighting anymore. I'll write CSS whenever I need to. And in the other cases I'll use a based LLM like Claude 3.5 to generate the Tailwind for me.

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Tailwind for sure.

I've worked on both and tailwind is easier to maintain + improve.

Collapse
 
itsakza profile image
akzaisme

I don't know about maintainability of custom CSS. It gets bloated a lot to the point the next developer who works on it later on will have hard time coping and figuring out some css class names. Meanwhile tailwind with prettier is pretty straightforward. There's no hidden styles. Unless you're using Svelte or writing every little things to be a component, there's really no benefit custom CSS has over tailwind considering most projects just extend and limit to the project specific styles.

Also if you're wonder why your React app is slow. Probably because you write everything as a function and even styles are a component which needs to be executed in a VDOM to calculate the diff irrespective of its on server or client. At that point, just use SvelteKit which atleast optimize with a compile step.

Collapse
 
msegmx profile image
msegmx

Asking ChatGpt and copy pasting the answer here is common now. 🙄

That being said..

Pure CSS ? No.

Pre-processor / SCSS? Yes.

Tailwind? Only after having mastered CSS / SCSS

Collapse
 
sooneer profile image
Soner Acar

I like the SCSS.

Collapse
 
mauricio_torres_d3e833c57 profile image
Mauricio Torres

I prefer Tailwind for speed and ease, even if I need to make some design where Tailwind is inflexible I use Custom CSS, maintaining a clear and consistent architecture.

Collapse
 
keyru_nasirusman profile image
keyru Nasir Usman

Do developers use vanilla CSS for bigger project? Writing CSS from scratch while working on a bigger project is going to be a headache.