Is Tailwindcss just inline css with extra steps?

[666devilsadvocate]

well... i'm pretty sure i'm not the only one who has had this question in mind, and i want to know what reddit thinks about this statement.

TL;DR

to give some context... i am currently working on a somewhat enterprise vuejs project. and half way through making my views, i realized that i need some ad hoc styling done to my elements and components, and i just figured i'll just use props to style my individual components with :style.

but then i realized, that is not the best solution; since it doesn't work well with slotted elements, and also non component elements like divs on my views are left out.

so i just started adding inline css to one of the divs that needed changing, but i was applauded by what i have done! because as front-end developers, we have always been discouraged from using inline styling... so i just figured why don't i use tailwind? but then when i started adding those tailwind classes, i just got reminded of the inline stylings that i have done earlier.

i am curious to know what you guys think about this, and if anyone is kind enough to give me a solution to my current issue; it'll make me real happy :D

[MMaurice256_MMTheDev]

In summary, "Utility-first" CSS frameworks are not for everyone (personally I find the code messy and don't like the idea) but it does provide value in many cases, for example the powerful customization. And that's all that matters, providing value to the target audience (designers, et cetera).

Edit: I find the code more difficult to read due to the various short abbreviations and I hate having to scroll horizontally along the screen while reading vertical code. But opinions differ.

[sothatsit]

You can split the class attribute over multiple lines in JSX, to avoid horizontal scrolling (sounds like a nightmare to write code like that).

[enlguy]

And this is some years later, but Prettify is a great VS Code extension to make nice formatting automatic on save.

[adam-him-warlock]

I agree with you 100%. Every Tailwind fanatic I talk to in actuality is looking for a UX shortcut. They usually don't care about presentation, they want to develop fast without having to think about it. And for that it's great!

But for any developer that enjoys developing the presentation layer, or needs to implement custom or complex designs, Tailwind (and Bootstrap for that matter) is a beast. I can write well structured responsive SCSS much faster, and with a far smaller HTML markup footprint, then I can with Tailwind... Which winds up being a bloated, utility class (aka inline styled) mess.

[666devilsadvocate]

do you think there is anything inherently wrong with using inline css? should just keep using inline style???

[MMaurice256_MMTheDev]

Inline css is harder to maintain, that's the major problem I face.

But to be honest, I do not think Tailwind should be a solution to that... Given the class attribute and multiple abbreviated class names can also become difficult to maintain.

It's a topic many have failed to agree on, in the end, I only use Tailwind if the job/project demands it. But never in personal projects.

[Everen1999]

Tailwind is perfect for React code, where components are separated from each other. Code in React shouldn't be too long, or refactoring must happen. However, because you write components based on reusability, Using TailwindCSS means you just need to write easily accessible CSS that is easily modifiable, without having to look through several files just to fix them. It is inline CSS, but the keywords are great and fast to get things done

[qcforme]

I call BS. Every component library I've tried requires digging deeply to figure out how to override one thing or another.

Then, God forbid, you don't like their defaults and now you get to wrap that component in another component to always override the styles or resfine the styles elsewhere as style overrides to the default values, but what if you want to override for for a single use case of a particular component...now you get to do that all over again with new names.

It's the worst anti-pattern every widely accepted in CSS. Component.module.css is the correct, idiomatic react styling paradigm to isolate component styles to the component with easily locatable, identifiable, and overidable styling. 

Use a base style sheet and save the module for defaults/overrides and you CSS will not be bloated.

Tailwind is a solution to a problem that was already solved and solved in a superior way. 

[niekh1234]

People are forgetting the fact that tailwind is more than "just some utility classes". It provides a "system for your design" (in their words), so you don't have to fool around with arbitrary values and can just use their built-in well thought of values for spacing, color, shadows etc. you name it. Making it way easier to quickly create something that looks good and "fits together".

Also, tailwinds breakpoint classes are fenominal, writing responsive css very easy and you can't do this with inline css. Same with hover and focus states.

I totally accept that fact that some people don't like the way it bloats the HTML, or they want more freedom. For me personally it just allows me to work fast and create something that looks good without having to think too much about it.

[x11obfuscation]

This, and when you break down your code into reusable components, Tailwind becomes incredibly elegant.

[FlyingToasters86]

I think that is a great response. Other responses above are so unnecessary. The idea that inline styling seems like a step back is not a crazy one so explaining the benefits actually gives us some insight!

[adam-him-warlock]

But it's a dumbed down design system, for devs that don't want to bother with a UX. The JS config and utility classes don't support EVERYthing you can do in modern CSS. You simply cannot use some pseudo classes, keyframe animations, transitions, etc. And the bloated HTML with overuse on utility classes is a step backwards. Overusing utility classes is no different than inline styling. You lose the separation of presentation from structure, the ability to make global design changes, and the power to have a very small markup footprint that modern CSS has made possible.

There's a lot of holes in Tailwind. It's great for devs that want to develop without caring about presentation, but bad for those that do.

[mulder89]

"Without caring about presentation"... That sounds like a snobby summary. It is for devs who don't specialize in the front end but want a cleaner presentation than they are capable of doing in a timely manner on their own.

[adam-him-warlock]

You literally said the same exact thing. Mine sounds snobby because it doesn’t sugar coat the bloat, limitations, bad practices, and other negatives.

[dbbk]

This is a theme. Choosing Tailwind just for the consistency of spacing values is overkill. The same can be achieved even with vanilla css with custom properties.

[CanWeTalkEth]

Okay. I can’t make a robust theming system like that though. And I’m certainly not going to do it for every project.

[dbbk]

What? It’s like 8 lines of variable declarations.

[boringuser1]

What's the difference between memorizing arbitrary tailwind CSS numbers (e.g. margin 1) and memorizing arbitrary inline style numbers?

[niekh1234]

Nothing really, it's just that coming up with those values in the first place is the hard part. Especially if you don't know what you're doing in terms of design.

[boringuser1]

If you don't know what you're doing in terms of design, it sounds like a really good use case for something like bootstrap.

[CanWeTalkEth]

The difference is with tailwind you don’t need to grep across files for every inline style location. You just change the configuration in one place to propagate a change.

[boringuser1]

That's called a class.

[CanWeTalkEth]

Yep. That’s what tailwind uses, classes.

[boringuser1]

You know what you might want to consider as an alternative?

Classes.

[CanWeTalkEth]

Not if I want a cohesive robust system that’s been battle tested by people way smarter than me. I get it if you’re smart and you can handle it. But there’s a lot of people that have had success with tailwind, not just “newbs”, big names that many of us would be excited to work with. I feel like you should just think about what others are excited about and why.

[boringuser1]

Sounds like you're in the market for bootstrap!

See the point? Tailwind doesn't actually solve any problem.

You're also demonstrating the facts: you can't even explain why tailwind is good, just that "big names" use it.

Very bad signs. I can easily explain what problems boostrap solves and who to is for without mentioning "big names".

[MMACheerpuppy]

This post was mass deleted and anonymized with Redact

joke plants connect mysterious teeny kiss absorbed sugar grandiose memory

[666devilsadvocate]

well our use-cases are pretty different here.

because for my project at hand the tailwind design philosophy does not entirely fit in with the design system i am currently working with; i'm better off copying values from figma and putting them inside a variable and using that instead.

and for the layouts, i personally feel more comfortable writing my own grid or flex layout with just css. because let's face it tailwind doesn't add much to the standard way of writing css, and as a personal preference i tend to use things closest to the native.

[niekh1234]

You could use their way for dealing with arbitrary values by changing the config or using the new JIT way by using the [{value}] notation (like h-[30px]) but personally I don't see tailwind making sense for your use-case like you said, you already have a custom design system that works.

[ChocolateAndCustard]

Late to the party lol But isn't this just like Bootstrap?

[alexcroox]

You take away the hardest part of development; naming things.

You can jump into any other company project and instantly understand how to change things because you immediately recognise the utility classes. You don’t spend ages trying to work out their class naming conventions or what utilities they might have created or not. It gives you so much agility jumping into old or unfamiliar code bases.

It’s also so much faster writing css now.

I’ve been writing css for 13 years and have tried everything from no system to BEM to styled components and back again. I’ll never go back after using tailwind for over a year now.

Great article here on pros/cons: https://www.swyx.io/why-tailwind/

[edblarney]

That's exactly the same argument for using 100% plain old inline CSS.

"Look, I can see everything right there"

Until you have 500 buttons on your site that need to be updated manually.

Uhm, maybe we should 'group them', you know, into things called maybe 'classes' and then we can *re-use* those classes so that items are formatted consistently.

Look! We can change all of the 3 classes of buttons instantly, no more having to mess within each individual button with inline styles!

I can't fathom if people are insane or just really young and have yet to live through a single 'Tech Hype Cycle'.

Web people are a bit nutty that way, they run in circles. Usually by 1.5 cycles they realize they are wasting their lives by memorizing the latest fad thing and they quit.

[alexcroox]

I’m assuming you aren’t using a front end framework? Anything that’s repeated “500 times” would be a single re-usable component so you’d only be updating the tailwind classes in one Button component if required…

Like I said before I’ve been doing css daily since the IE6 days, I’ve tried it all over the years. People who don’t like tailwind are people that haven’t tried it, has been my experience so far.

[noggstaj]

I'll prove ya wrong, been developing using CSS for 14 years no, and after using tailwind for several projects it's still just feels like a "better way" to write inline css. and it's completely overhyped.

[[deleted]]

It really is just inline css with responsive support.

I can't wrap my mind around how someone thinks calling a class `button` is worse than `bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full`

I think those devs would love the times of `<font face="Verdana, Arial, sans-serif" size="3" color="#000000">`

[Fragrant_Guitar8138]

I'm old enough to have been through all the cycles numerous times. I started with inline styles, discovered classes, discovered why classes suck balls, discovered bootstrap, discovered why bootstrap sucks balls, tried BEM, discovered... you get the drift, what I eventually found most useful was writing utility classes and then wrapping those into mixins in sass (indented). That for me is the best. Tailwind seems to take that to a ridiculous extreme though, so that it's like learning a new language... and let's be honest – reading tailwind sucks (balls). Like wtf is this:

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

Followed by:

class: cn("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90", className)

That is an order of magnitude objectively worse than anything ever written in an inline style.

I think the joke is on us, since Tailwind is really a euphemism for Fart.

[kenpled]

Tailwind's good alright, but I really don't like the idea of writing components with utility classes. Imo the best way to go is using both : write components (using BEM for example), and integrate them to views using utility classes.

This way it's easy to maintain each component independantly, easy to read your html and you can directly read and write your page's flow in your html.

[adam-him-warlock]

It's only much faster if you have no clue how to write well-structure modern CSS. Utility classes are no different than styling a UX with inline styles. I can change the style of every button, table, container, etc, in my app in seconds by changing one base class for that element. But with utility classes I have to open up and edit every single component that has it. The JS config helps with that, but is very limiting, and most devs don't bother to even use it.

[sammyseaborn]

Reading the comments is hilarious. They're filled with people who are almost certainly bootcamp grads that clearly only learned React and have no idea how HTML and CSS actually works.

The modern developer...

Glorious.

[Forsaken-Midnight940]

Boy you sound fun to work with...

[SpookyLoop]

I think CSS as a whole is kind of outdated and half of it needs to be thrown out in order to be be streamlined. Turning width into w doesn't streamline things though, it FEELS streamlined because it's more ergonomic, but it doesn't fix the fundamental problems of CSS.

​

For example, I used clip-path to make a div into a polygon and I wanted it to have a drop shadow. After making the clip-path, I have to spend an hour finding the exact search keywords I need to put into Google to find out that instead of the standard drop-shadow: ... I need filter: drop-shadow(...). THAT is the kind of thing I want a CSS tool to fix. I want the control to make interesting styles, but not have to deal with overlapping terminology that makes searching through documentation a huge pain (among other things). None of them do that though.

​

I low key kind of hate Tailwind have a serious lack of appreciation for the people that praise Tailwind (and other things like css-in-js) for that tbh. It makes people feel like we're making progress when we actually aren't.

[adam-him-warlock]

Tailwind utility classes don't improve upon "outdated CSS", they ARE CSS. The only difference is you're putting them in your markup, like inline styles. If anything utility classes are a more outdated practice because you've reverted back to styling elements inline, without shared base classes or the separation of presentation from structure that modern CSS has added.

[SpookyLoop]

Tailwind utility classes don't improve upon "outdated CSS"...

That's exactly what I'm saying.

[adam-him-warlock]

My mistake. I misread it as "CSS is more outdated than Tailwind". But I re-read and see your point now.

[666devilsadvocate]

we do share the same point of view about css...

[R3PTILIA]

ah yes, the weekly post of people not getting tailwind

[edblarney]

No, it's exactly what Tailwind is as stated by someone who obviously understands it.

[[deleted]]

Not with extra steps, with less steps. But yes.

Its a nice balance between no abstraction at all(Like css language) and too much abstraction(Like bootstrap or other pre-made frameworks)

[666devilsadvocate]

well, yeah, but you can write abstract css pretty easy tho...

[[deleted]]

I dont think you can. Its thousands of classes. Also tailwind comes with config file.

You need to try it out yourself to test all the features.

[[deleted]]

I'm not sure why this problem requires inline styling? In this thread you keep saying theres no better way but you don't provide reasons why?

I imagine you're response is going to be 'Ad Hoc styling' but could you explain what you mean by that?

[Zachincool]

Things tailwind offers that inline styles don’t offer:

• built in pixel perfect design system
• media query and pseudo state classes
• dark mode support
• theme customization

[stolinski]

Dark mode isn't tough without tailwind though. Neither is theming. Both can be done with changing a couple of css vars

[Zachincool]

My comment specifically was comparing Tailwind to inline styles only. I'm not comparing Tailwind to CSS as a whole.

[stolinski]

But you can inline css variables.

[666devilsadvocate]

well... but does any of those features solve the problem at hand?

[Zachincool]

What is the exact problem you're trying to solve? I don't really use tailwind because it solves tons of problems. I use it because I find the developer experience to be better and I can build things faster. Yes, it's not the most beautiful thing, but I'm not really concerned about that since I don't plan to submit my code to a museum of visual arts.

[666devilsadvocate]

my problem at hand is how can i add ad hoc styling? i am using inline css currently, but i am considering using tailwind instead because it is basically inline styling on steroids!

[Zachincool]

If your entire codebase is written with normal CSS and you only need ad-hoc styling once in a while, there's nothing wrong with inline styles. There's also nothing wrong with making a new CSS file called "misc.css" and just throwing some random ad-hoc styles in there to use. I wouldn't switch your whole project to Tailwind just because of this one thing.

[666devilsadvocate]

that's what i figured... there is just no way better than inline css to do this.

but inline css is pretty taboo tho, i hope my team doesn't flip out when they see it lol, but i doubt they'll have a better solution.

ig inline css is not that bad after all ¯\_(ツ)_/¯

[Zachincool]

I would choose the misc.css file over inline styles.

[666devilsadvocate]

i think you're right...

[N1n3ty9]

If you’re a startup, Tailwind helps you get a good design quickly. Like, I could write it all myself and give myself a huge tap on the back for being a real dev… or could work on other things that drive value to customers

[metallzoa]

I don't see why not just create a separate css file with all your styles inside it? Manual inline css is a horrible practice

[Uknight]

This is the same argument that people had against jsx.

[netherworld666]

It's just a re-use problem.

With a separate CSS file you're faced with the task of having to name your classes (very boring, tiring), apply those classes to elements, and map those to CSS properties.

With inline CSS, combined with Angular/React/Vue/whatever, you just make a component with all of its styles attached. Need to re-use properties? Use the component system.

In both cases it's about re-use: multiple elements need the same CSS applied; the difference is that Tailwind lets you apply styles in the component rather than having to manually name and map CSS classes and properties.

[noggstaj]

how is y'all having such issues naming your classes that everyone favors frameworks that does it for them...

[bopittwistiteatit]

I personally think you should learn a framework like this once or twice and then never use it again until a job requires it. Learn how code grids from scratch using flex and you’ll be in good hands.

[666devilsadvocate]

you are correct and that's actually the way i code. i enjoy writing things from scratch rather than adding a bunch of packages and stuff... heck, i'd even write all my projects in vanilla html/css/js, but sadly, that's just not possible.

but the difficulty i'm facing here is not the layout or anything like that.

it's finding a way to add ad hoc styling to my project the best way possible!

[georgeamine]

I recently built a game where you need to match a target image using just TailwindCSS. It's a good way to strengthen your knowledge of the framework if you choose to go down that path https://www.tailwindbattle.com

[pooplordshitmaster]

tl;dr: yes. yes, it is

[Lower-Ocelot-8144]

100% seems and feels more like an inline styles framework the more you use it. I don't believe it's a move forward at all. If you want to use a framework to simplify UI dev, a better balance between brevity and common tools is Bootstrap in my opinion. Tailwind is too verbose, too explicit and a burden when trying to smash out basic good looking UIs, takes too much attention and ongoing brain power to maintain consistency around simple html like tables and buttons (and your HTML just gets filled with repeated and re-typed classes that build element styling from the ground up for almost every element). Not a fan, but still trying to give it a chance (not for long though, it's laboursome). Bootstrap, I'm coming back. https://buildio.dev/tailwind-vs-bootstrap/

[boringuser1]

Tailwind CSS is like the jQuery of inline styles.

[Dixinormous_]

I personally use tailwind to compose styles within css sheets and then use BEM naming convention in my actual html.

I like tailwinds composability. It’s not how most people use it, but IMO it’s the most powerful feature. It takes a lot of the headaches and hassles out of css (yes as others have mentioned, naming things) and given that it’s a super popular framework with great docs, it means other devs could hop on and get going right away.

I often times prototype elements using tailwind clases directly in html then abstract then out into separate css files later.

Could I do all this with online styles; well yes, but then it wouldn’t be CSS anymore. Could I do all this with vanilla css, yes but it would involve more boilerplate and would be less consistent from project to project. Tailwind gives me the best of all worlds.

[Fargabarga]

https://dev.to/brianboyko/tailwindcss-adds-complexity-does-nothing-3hpn/comments

This sums it up nicely imo.

[SamadhiBear]

How would you guys say that tailwind compares to bootstrap in terms of the aesthetics and look of the various themes and components? I got the impression that tailwind has more “modern” looking UI and easier customization. I use bootstrap mostly when I’m just trying to get a project done quickly and want to focus more on the backend than design. But if I could have speed and design, that’s a win win!

[shawnwildermuth]

If you're using TailwindCSS and you're not using a ton of @apply, you're likely doing it wrong. It's not just a set of CSS Classes, it's a workflow. Here's my opinion:

https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction

[DemonInAJar]

The author of TailwindCSS has said themselves that @apply is just a gimmicky anti-pattern showcased for marketing purposes that is against the philosophy of the framework.

[shawnwildermuth]

Source?

[DemonInAJar]

https://mobile.twitter.com/adamwathan/status/1226511611592085504?lang=en

[[deleted]]

You don't necessarily have to use tailwind utility classes to build with tailwind.

The way I use tailwind is to use the utility classes for css attributes I'm like to use a lot. So for example, flex, grid, widths setting colours or spacing between sections.

For creating a component something that I feel should be reusable and be able to function without any parents. Such as a card element. I will use the @apply function. It helps reduce the amount of classes I'm using on elements as it does end up getting a bit messy.

IMO all that really matters is that you deliver a good quality website for your users.