13 ms·
Open-sourcing our progress on Tailwind CSS v4.0
- sathl0ne 3y agoI use Tailwind at work daily and I still believe it is a crutch for a bad design system. I see pros and cons. If you keep your class count relatively small, you can "see" how the element is going to look if you are good with CSS, and it is incredibly intuitive. On the other hand, when you see blocks with 20+ classes, just like some examples posted here, they are hideous and all the readability goes down the drain, I take this should be made up for with the use of components and limiting copy pasting. Also I don't think you have to use either Tailwind or more classical approaches, in fact I like mixing both. During a rush a couple of years ago my team had to give a more up to date look to mane features in our app and, provided you have a strong component system, those touch ups were mostly related to positioning and sizing, and that represents 99% of our usage of Tailwind.
- ado__dev 3y agoLots of promising improvements. I'm most excited about being able to control the theme via CSS instead of having to extend via JS.
- verdverm 3y agoSame excitement here, I had to drop into css to write this yesterday, as extend in the config file did not like it .vertical-center-line { background: linear-gradient(#000, #000) no-repeat center/2px 100%; } .horizontal-left-center-line { background: linear-gradient(to right, #000, #000) no-repeat left/50% 2px; } .horizontal-right-center-line { background: linear-gradient(to right, #000, #000) no-repeat right/50% 2px; }
- mg 3y agoCTRL+u gives a nice example of the syntax. For example to make a box with rounded corners and a top and bottom section, all you need is this intuitive one-liner: <div class="mt-5 mb-8 first:mt-0 last:mb-0 relative overflow-hidden rounded-2xl"><div class="pt-2 bg-slate-800 shadow-lg group"><div class="flex text-slate-400 text-xs leading-6"><div class="flex-none text-sky-300 border-t border-b border-t-transparent border-b-sky-300 px-4 py-1 flex items-center">app.css</div><div class="flex-auto flex items-center bg-slate-700/50 border border-slate-500/30 rounded-tl"></div></div><div class="children:my-0 children:!shadow-none children:bg-transparent"><pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"tailwindcss"</span><span class="token punctuation">;</span></span></code></pre></div></div><div class="pointer-events-none absolute inset-0 rounded-2xl dark:ring-1 dark:ring-white/10 dark:ring-inset" aria-hidden="true"></div></div>
- elaus 3y agoI don't think this is a very good example, because it's not just "a box with rounded corners and a top and bottom section". It's a fully styled box containing formatted code (leading to a lot of spans and classes for individual chars in this code).
- kingofthehill98 3y agoI'll take this over grepping hundreds CSS files trying to find that one specific class and hoping it's not used anywhere else anyday of the week.
- degun 3y agoCan you not keep your files in some sort of order?
- kingofthehill98 3y agoOn my pet projects? Absolutely. On work projects with 5 years of contributions wrote by 50+ collaborators and close deadlines? Hardly think so.
- leptons 3y agoIf you have to use grep to find a CSS class, you're doing it very wrong. Not having any discipline or organizational skills leads to needing grep to find CSS, it is not something inherent to CSS itself. In my front end, for example, I have registration-page.jsx and registration-page.less, and there is really zero mystery where the styles are for the registration-page. It uses components like password-input.jsx, and guess what? the CSS for that is in password-input.less. There's no grepping, there's no difficulty finding the classes that are specified. Everything is very orderly and easy to find.
- psygn89 3y agoEven if your styles aren't colocated you can use sourcemapping alongside established patterns on how to structure out your scss/less. Just inspect the element and click on the filename next to your selector and it opens in your editor.
- kingofthehill98 3y agoTailwind is the second best thing ever happend to frontend, only Vue 3 tops it. Not having to come up with names for CSS classes, no duplicated CSS code, no fighting conflicting classes, everything in one file, being able to visualize a component just by reading the code... it's a godsend. I'll never go back to SCSS unless work obliges me. Vue 3 with <script setup lang="ts">, TailwindCSS and Vite. The way God intended.
- RexFactorem 3y ago[dead]
- balls187 3y agoHave you tried Svelte?
- kingofthehill98 3y agoI have, it's just as good if not a tad better, but I'm so comfortable and productive with Vue and they're so similar that it's just not worth switching. I'm also very familiar with the Vue ecosystem, so anytime I need a library or plugin I know exactly what to pull.
- blackbeans 3y agoIt's slightly more convenient, but Vue3 is already great. I like to support an ecosystem and I want a framework to keep existing, making sure I can maintain my projects in the future. That is why I don't jump ship.
- Keyframe 3y agoNothing against you, but I swear Svelte is Rust of frontend tech. Whatever the topic, it always pops up out of nowhere. idiot edit: not React, Rust.
- pcthrowaway 3y agoSvelte pops up out of nowhere because people tend to really love it. Not sure how it's the "React of frontend tech" since React is a competing frontend framework (which is now moving to adopt a Svelte-like compiled approach). I haven't used Vue (any version) so this wouldn't be the place I'd normally chime in about Svelte. People seem to love Vue as well.
- tomschwiha 3y agoIs there any good tutorial/ guide available with best practices for tailwind?
- dcre 3y agoThe docs are great and they also happen to be a kind of "CSS: The Good Parts." What sort of questions do you need answered? For the most part you just make components and put styles on them.
- tomschwiha 3y agoRight now I have the feeling when using tailwind the html code becomes unreadable cluttered with classes. So abstraction of components is king? Maybe I'm just overthinking it.
- dcre 3y agoYeah, I would say using components (rather than classes with @apply, as another commenter said) is the main thing. The class clutter is then contained to that component. You make some components and then in most of your code there are only a few classes here and there. Here's an example from my main work app: Components: https://github.com/oxidecomputer/console/blob/da07ce01a8fb7fe69c3ed35733a7e7fb2f268ba0/app/components/Sidebar.tsx https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f... Clean call site: https://github.com/oxidecomputer/console/blob/da07ce01a8fb7fe69c3ed35733a7e7fb2f268ba0/app/layouts/ProjectLayout.tsx https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f...
- math_dandy 3y agoEither your html becomes verbose or your css becomes inscrutable. Pick your poison.
- chatmasta 3y agoI thought styled components solved this issue pretty well. Your markup (JSX) is composable, and so is its styling (styled components with raw CSS or object syntax). Unfortunately, many developers using styled components don't realize the power of their composability, and end up just writing one level deep for each component. But in fact you can wrap styled components and compose them together...
- YetAnotherNick 3y agoThis is not a complaint. But as someone who uses AI heavily for tailwind, I found that GPT-4 couldn't update the syntax even after the cutoff is updated. Likely it gives equal weightage to documents regardless of the date. And even with 2023 cutoff it just can't work with new syntax of many libraries I tried. I had hopes with google in this as they already likely have things like official docs, updation etc labelled so they can give different weights to every document. But then there is Gemini.
- duckmysick 3y agoHave you experimented with Retrieval-Augmented Generation (RAG)? Here's a good primer on it: https://aws.amazon.com/what-is/retrieval-augmented-generation/ https://aws.amazon.com/what-is/retrieval-augmented-generatio... And here's a recent HN thread about RAG on PostgreSQL: https://news.ycombinator.com/item?id=39613669 https://news.ycombinator.com/item?id=39613669
- YetAnotherNick 3y agoYes, it's not as good as the base knowledge of the model. And in a way even chatgpt/bing web search is RAG.
- djmashko2 3y agoLooks like a lot of great improvements, but wanted to put in one vote in favor of keeping the capability of having a JavaScript-forward configuration/usage approach, rather than requiring a CSS-forward approach. For us, one big benefit of using Tailwind has been that we can avoid spending a lot of time thinking about CSS and CSS tooling, and being able to configure everything via JS has helped in that regard.
- jaredcwhite 3y agoThat's exactly why critics of Tailwind (like myself) have been so frustrated…Tailwind shouldn't mean you avoid spending time "thinking about CSS". CSS should be a principal and respected pillar of a website's architecture, every bit as vitally important to reason about and understand as anything JS-related. Tailwind v4 promoting CSS-first configuration and customization, and allowing design token usage in vanilla CSS, knocks down a major complaint we've had regarding the framework.
- deleted 3y ago[deleted]
- asimpletune 3y agoI am not a front end developer, but I do maintain a few websites and I have used Tailwind for all of them. My general take of the overall quality is that the maintainers of Tailwind have really good intuition in terms of what to prioritize, as well as excellent design taste. Tailwind is one of those tools where it only makes sense once you start to use it, but each version they've announced brings a continuously more polished product. If you don't like Tailwind or you don't understand it or if anything I'm saying makes you mad, try first building something big with it. It's pretty maintainable, easy to read and write, and, most of all, is very portable. (I mean that in the sense that something you write in one place can be copy and pasted somewhere else and it will more than likely work exactly the same.) As far as this version is concerned, it looks like not a whole lot has changed from a compatibility perspective, but I think when version 4 becomes official it might have more breaking changes. In any case, the prospect of a new engine is very cool, as faster builds are always welcome. Congratulations to the team! I may not be a front end engineer, but with Tailwind I don't really have to be to make what I want.
- chatmasta 3y ago> It's pretty maintainable > something you write in one place can be copy and pasted somewhere else That sounds like the opposite of maintainable.
- asimpletune 3y agoThe copy and paste statement related to portability, and that's how I was defining it in this context. It was not intended to speak to Tailwind's maintainability. However, a traditional class-based, modular approach to CSS can not guarantee portability in the same way. So if you can not predict what effect the same classes, or even the exact same HTML, will have, then it's neither portable nor is it very maintainable either.
- acaloiar 3y ago> Standalone CLI — we haven’t worked on a standalone CLI for the new engine yet, but will absolutely have it before the v4.0 release. This part is the most exciting to me. Given the rest of the release announcement, I'm assuming this means that it'll be built in Rust rather than embed Node. While I'm not a Rust zealot of anything, I'm very partial to not embedding Node. Particularly when it depends on using Vercel's now-abandoned pkg[1] tool. [1] https://github.com/vercel/pkg https://github.com/vercel/pkg
- adamwathan 3y agoIt'll likely embed Node I'm afraid — the vast majority of Tailwind is written in JS so we'd have to rewrite all of that in Rust just for the standalone CLI, and migrating the entire project to Rust is impractical because we'd have no JS plugin story like we do now.
- acaloiar 3y agoBummer, but thanks for resetting my expectations :)
- neilyio 3y agoI'm feeling a similar disappointment here, although I'm sure this was carefully considered by the Tailwind team. I've been working with a fully Rust-based web stack, and it's been such a joy. Tailwind compilation causes me to still deal with Node. I'd love to see that go away.
- ajayvk 3y agoThe current standalone tailwind CLI does not support external plugins like DaisyUI. It would be great if external plugins could be supported in the next CLI version, it will reduce the need to use npm for some projects.
- adamwathan 3y agoDon't you need to use npm to install DaisyUI though? If you have to install third party plugins using node already to me the solution is to use our actual node CLI instead of the standalone one.
- morbicer 3y agoHow does people solve component variants? Say <Button type="success" size="lg"> or <Button type="danger" size="sm"> ? For optimal gzipping (and saner readability) it's recommended to have sorted classes (prettier-plugin-tailwindcss) But if you want to have some overridability (avoid clashing of p-4 and p-8) you need tailwind-merge. These two don't play together well
- yurishimo 3y agoYou could use the !important variants for overrides instead of merge. In v4, the tailwind team has already said they want to introduce a solution to solve this problem without tools like tw-merge. I’m guessing it will be some sort of modifier that is placed at a lower specificity if you know that you are authoring something that will be overridden later.
- emi2k01 3y agoI think they most likely will introduce `@layout`s and then your components can be in a different layout than your app code
- Rapzid 3y agoButton.css I find it's often easier/cleaner to just pop a CSS file in for some of these foundational components that have tons of variations. Can use nested CSS now, and the selectors are easier to to work with IMHO and take care of specificity.
- TIPSIO 3y agoSwitching the theme configuration to CSS variables makes a ton of sense. But what is the point of introducing a directive called "@theme{}" though for configuration? Why not just do ":root{}"?
- cantSpellSober 3y agoApparently they do that too > We also make all of your theme values available as native CSS variables in your custom CSS theme() makes using them more tailwind-y
- adamwathan 3y agoWe considered it but it felt too magical to make any CSS variable under `:root` automatically drive the existence of utility classes. Putting things under a custom at-rule like `@theme` makes that opt-in, because we know anything you put there is actually intended to drive your utility classes.
- TIPSIO 3y agoMakes sense! Thanks for the reply, Adam. Best of luck and thanks for driving progress forward with the project still.
- deleted 3y ago[deleted]
- jaredcwhite 3y agoAs a forceful critic of Tailwind over many years now, I must say all of the announcements under the CSS-first configuration are extremely welcome. This makes it possible to take advantage of all of Tailwind's design tokens, reset, etc.—and even even customize them via real CSS—and then use tokens in honest-to-goodness CSS via native variables. This opens up a new world of "light" usage of Tailwind for its theming and utilities, *without* throwing away all of the awesomeness of modern CSS architecture, the cascade, and even shadow DOM in web components. I'm a huge fan of this major improvement to the framework.
- hit8run 3y agoMy friends: do we need tailwind as soon as Safari 17.4 is out? Chrome has @scope already available and safari soon. With @scope we don’t need utility frameworks at all and can make use of scoped css with css variables for unification. What do you think?
- yurishimo 3y agoI mean, there are the millions upon millions of devices that don’t run up to date safari versions. While @scope is awesome, the reality is that preprocessed nesting is super easy to use now and to rip out later. You’re only hurting users (likely poorer, less tech savvy ones) by jumping ship immediately. In 2026, sure! Go nuts and rip it all out, but give people a bit to update first unless your target market is SF tech influencers.
- Rapzid 3y agoHasn't FireFox been dragging their asses on @scope? https://github.com/mozilla/standards-positions/issues/472 https://github.com/mozilla/standards-positions/issues/472 It took years to just convince them of the need for it. And I'm not sure anyone got convinced vs Chrome had already shipped it and Safari has it planned so they caved in. The most recent update I'm aware of is that it's "worth prototyping". Hard to believe FireFox used to be a leader of the modern web.
- deleted 3y ago[deleted]
- rado 3y agoIf an org can't organise its workflow (name things) and adopt external organisation (magic bullet frameworks), the org will always have poor organisation in the long term.
- dcre 3y agoI honestly can't tell whether this is meant to be for or against Tailwind. Is Tailwind a utility for organizing your workflow or a magic bullet framework?
- corytheboyd 3y agoOut of curiosity, does anyone out there use tailwindcss with htmx (or other hateoas approach)? You obviously don’t want to have your hypertext representative of application state to have anything to do with styling, but something like tailwind can be odds with that. Cascading style sheets and hateoas obviously go together perfectly, as it’s markup and styling decoupled as god intended, but with something like tailwindcss, what are people doing?
- ralmidani 3y agoI don’t have much insight into htmx + Tailwind, since the last time I worked with Tailwind was like 8 months ago at my prior job - and even then I did very little styling work. With that said, it’s not really clear to me what the connection is between HATEOAS and Tailwind. FWIW, for the app I’m working on currently, I’m outsourcing most of my styles to Bootstrap, while pushing hard for progressive enhancement via CSS hacks (for effects like expanding/collapsing menus and switching tabs). I’m using htmx when JS is enabled, and regular HTTP for when it’s disabled (the Django back-end renders partial or full pages based on request type). Bootstrap and htmx don’t really step on each other’s toes, and I don’t see why htmx + Tailwind to be different. If in doubt, experiment!
- deleted 3y ago[deleted]
- adalu 3y ago[dead]
- stevage 3y agoEverything about this sounds like how I expected Tailwind to work the first time I tried it. I wanted to love it, but instead got bogged down in all this PostCSS nonsense and configuration before I could do anything. Happy to see they're moving towards a "it just works out of the box" approach.
- sntran 3y agoI was excited to use this in my Demo project, but `import from "node:@tailwindcss/postcss@latest"` throws error about the `exports` field in package.json. With that aside, the blog post mentions not having to use `postcss-import` but it seems to include that as dependency. So we're still using `postcss-import`.
- moralestapia 3y ago>Last summer at Tailwind Connect ... Wow, a CSS library with a developer event and Apple style keynotes.
- mock-possum 3y agoThat’s where the big bucks are.
- akvadrako 3y agoI wish tailwind would support attributify like https://github.com/unocss/unocss https://github.com/unocss/unocss, which is much more readable for complex layouts: <a bg="red" text="white" dark="bg:red text:white">link</a>