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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
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.
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?
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!
You can still extract components which is very similar to writing css class but much simpler.
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
Why no one will be able to add changes?
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.
I suggest you read a little bit into the documentation concerning 'tailwind.config.js'
tailwindcss.com/docs/configuration
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.
Because naming is hard, less names written less time lost on frivolous names.
Naming is only hard when you're not really sure what it is you're naming
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.
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
containerclass 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-bioor.button, but in 95% of the cases we use tailwind. An extraordinary CSS framework that works great for teams.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.
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
@applythen you can just use normal CSS that will be supported forever, unlike frameworks.Kindly disagree, its depends on how you organize your styles, if you have strong directives in your team, everything should flow normally.
"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: #1D4ED8in 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.
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
There is no thing called CSS colors. Its a hex code that you write to get colors
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!
What are the base colors CSS offers?
Like the colors such as
blueandredThose 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
yes but those color palettes require extra steps to setup, while Tailwind offers a great selection out of the box.
What extra steps does it require? Copy/Paste from a website?
From that logic, TailwindCSS requires extra installation step too
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 :)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.
I mainly use Bootstrap for the time saving responsiveness, have you used bootstrap and how does it compare to tailwind ?
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.
can you combine bootstrap with tailwind, and get best of both worlds? lets say bootstrap for responsiveness and tailwind for styling
not even Adam Watham recommends to use @apply.. .
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?
here.
twitter.com/adamwathan/status/1296...
thanks! I guess this should also appear in tailwind's doc.
haven't seen it...
I mean, it's not in the docs, but it should be.
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.
Yesterday I used Tailwind for the first time and am trying to understand more of the principle of
run devandrun 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).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.
Great post, I am always surprised of the pushback tailwindcss receives.
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.
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.
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
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.
True but I feel like it makes writing CSS faster and easier to style
oh my god hi shubham
hello there!
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!
Hello everyone so now I have a Twitter. It would be awesome if you could follow me at twitter.com/ShubhamPatilsd!