TailwindCSS JIT with arbitrary values

https://tailwindcss.com/docs/just-in-time-mode

by ccmcarey • 5 years ago

145 123 5 years ago

Kaze4042• 5 years ago

I love TailwindCSS, and this just made it better than I wished for. It was always annoying having to use style attributes for specific, one-off things and it's great knowing that it won't be a problem anymore. Not to mention of course the performance improvements.

Can't wait to upgrade Tailwind on my project and try this out :)

gvkhna4• 5 years ago

Tailwind is great but the horizontal alignment of all classes is definitely not ideal.

Is there a vscode extension that possibly aligns classes in new lines? Alphabetical sorting could be nice as well.

Is this on the horizon for the Tailwind team? The intellisense extension is quite good so it’s possible this is a problem they are working on as well.

beckler• 5 years ago

I wish there was a convention on the order of classes on an element. Like height/width first, padding/margin next, idk what next, and then pseudoclass variants at the end, but in the same order?

I don't know honestly, I just wish there was a convention.

leipert• 5 years ago

There are, e.g. this prettier plug-in: https://www.npmjs.com/package/prettier-plugin-tailwind or headwind: https://github.com/heybourn/headwind

smoe• 5 years ago

I have seen various conventions over the years on how to order css properties that could be used for ordering tailwind style classes. E.g https://rhodesmill.org/brandon/2011/concentric-css/

The problem is more, that to my knowledge, none of them got wide adaption. You could at adapt them on at least a company/team wide level, but don’t know what tooling there is to make it easily configurable.

tpetry• 5 years ago

This may sound strange first, but there is nothing to argue in a team about if you sort them alphabetically.

jzeltman• 5 years ago

Check out this extension for VSCode which organizes your classes on save. https://marketplace.visualstudio.com/items?itemName=heybourn...

Otherwise, I usually try to separate out states when using @apply.

` .example { @apply bg-blue-100; @apply hover:bg-blue-200; @apply focus:bg-blue-200; `

But now with JIT you could simplify if you wanted to:

`.example { @apply bg-blue-100; @apply hover:focus:bg-blue-200;`

dillondoyle• 5 years ago

Maybe you could use data-attribute to group these common styles like 'sizing' 'color' etc

something like <div data-css-size='large flex-box display-flex' data-css-color="red" data-css-font="gotham serif"></div>

then something like [data-css-color*="red"] {color:red;}

I haven't tested this just thinking off the top what might work

gvkhna4• 5 years ago

I’m ok with a convention but considering how that could become it’s own complete config maybe alphabetical would just be better. Also it typically has less issues with git changes.

earthboundkid2• 5 years ago

The convention I have started using is “outside in” meaning first the margin, then the border, then the padding, etc. It’s not perfect because a lot of stuff is “in” (font family, text color, etc.) but it at least gives a rough directionality to things.

jfleck2• 5 years ago

https://github.com/fleck/class-types.macro#auto-reorder-clas... The order I ended up going with was to match tailwind's output order.

jfleck2• 5 years ago

self plug, but I wrote a macro/eslint plugin that does a couple things and this is one of them: https://github.com/fleck/class-types.macro#better-prettier-f...

rubans• 5 years ago

There's Headwind CSS, which orders classes predictably. But it doesn't move them to separate lines. This could be a config option if you're willing to write a pull request.

https://github.com/heybourn/headwind

sam_goody• 5 years ago

Small companies have too many rough edges.

Large companies have too much baggage - fear of breaking compatibility, and don't develop new enough things.

There is a certain size where changes are exciting, or certain company cultures that encourage new stuff. Tailwind is there, and it is always fun to get their update emails.

Yabood• 5 years ago

I’ve been using tailwindcss and tailwindui for our production platform (released), and our new website (in development) and couldn’t be happier. Once you get the hang of it, you’ll be able to build stuff very quickly. For our production platform, I have it running on top of Angular and Angular material. Getting tailwind, angular, and material to work together wasn’t easy, but once I got it up and running, it was pretty straightforward to start building new pages or modify existing ones without having to change existing styles.

I had two major complaints and this update fixes both. The first is the enormous size of the css file locally, which caused the browser to become considerably slower and made the developer tools really slow to load when selecting elements. The second was the lack of the !important selector.

This is a solid update. Kudos to the team.

Lapsa4• 5 years ago

"The second was the lack of the !important selector." sounds like a red flag.

thrixton• 5 years ago

Any good resources on getting it working with Angular and Material?

habosa3• 5 years ago

Oh is THAT why my dev tools are so slow? Especially in Firefox, selecting elements has been really laggy. I figured it was because of my crappy laptop.

I also love Tailwind, glad to know it's about to get better.

jackconsidine• 5 years ago

I found out about TailwindCSS from the Full Stack Radio podcast, hosted by Tailwind's creator. Good for Adam Wathan.

Unfortunately, the podcast hasn't been kept up in the past few months. I assume TailWind is taking all of Adam's time now?

clement75009• 5 years ago

That and a baby: https://twitter.com/adamwathan/status/1379437055516680202 Congrats to him!

davzie2• 5 years ago

I was once a massive Tailwind hater. I remember walking around Ipswich with a close friend who is also a developer proverbially slagging it off and all those that espoused it as the next best thing since sliced bread. Then I actually thought “well I’d better jump on this bandwagon before I’m unemployable”. I’ve never been able to build stuff so fast. I’m absolutely floored by the small learning curve and the speed at which I can put things together, especially with the help of TailwindUI too. There’s something huge to be said about the fact that I don’t need to context switch to CSS-land out of my markup to style up what I’m doing. I didn’t realise it, but that overhead of switching to a style sheet and going back to modify markup and then viewing the results in the browser really just used up my mental energy battery. Now, if I was in prison with Adam Wathan and Steve S, I’d 100% protect them in the showers if they dropped the soap.

zoover2020• 5 years ago

Exactly my experience, haters gonna hate... For CSS, I'd argue it _is_ the best thing since sliced bread

hardwaregeek• 5 years ago

That's...the most interesting way I've seen of saying you like someone's work.

Ashanmaril• 5 years ago

It's also very nice when you're moving some markup from one file to another and not having to worry about where certain styles are coming from and copying those over too

tomcam• 5 years ago

It's all fun and games until you're in the prison shower with a bunch of Bootstrap goons

Swizec• 5 years ago

There’s something huge to be said about the fact that I don’t need to context switch to CSS-land out of my markup to style up what I’m doing. I didn’t realise it, but that overhead of switching to a style sheet and going back to modify markup and then viewing the results in the browser really just used up my mental energy battery.

Welcome to what us React folk have been saying since at least 2016. Splitting your code by language is bad. Vertical slices for the win.

benatkin• 5 years ago

Agree. Vue and Svelte get this right as well (assuming you use SFCs properly), except they don't have bizarre preferences for one-way data binding everywhere or typing className instead of class.

aabbcc12412• 5 years ago

Elm also approaches this way, with type-safe checking.

tiborsaas2• 5 years ago

I still dislike CSS in JS solutions and classname soup.

- A fellow React folk.

atonse• 5 years ago

Can we please add this prison testimonial to the tailwind website?

b0afc375b5• 5 years ago

This is the most eloquent way I've read someone praise someone else's work so far.

runarberg3• 5 years ago

Now, if I was in prison with Adam Wathan and Steve S, I’d 100% protect them in the showers if they dropped the soap.

Sorry to go on a tangent here with a commentary unrelated to the discussion at hand (which is indeed an interesting one), but can we please stop with the rape jokes. They are not funny, and may be triggering to a large portion of your readers.

cloogshicer• 5 years ago

Agreed, good thing you pointed this out. Here's a really good video that discusses this issue: https://www.youtube.com/watch?v=uc6QxD2_yQw

Kaze4042• 5 years ago

I'm glad someone said this before I did. Male sexual harassment has been so normalized in media over the years that we can barely recognize it in the wild. As a man who has dealt with sexual harassment before, I feel like we should talk about it more.

lurker3901• 5 years ago

thanks for going on a tangent about something unrelated then /s

davzie2• 5 years ago

I said I’d protect them !

dasil003• 5 years ago

I love how quickly you went from publicly denouncing Tailwind to panicking that you would be left behind and jumping on the bandwagon. I'm imagining this psychological drama playing out within the gap between two spoken sentences to your friend and it's hilarious.

pfraze• 5 years ago

I completely agree with your points on mental energy expenditure and speed of development. I thought it was a bad idea, but I’m now 3 months deep into a big project using it and I will never go back.

NiceWayToDoIT• 5 years ago

I just ducked all that, and started writing a plain old CSS with BEM like a mad man, and know what with a bit of discipline and good methodology it works as magic.

qbasic_forever4• 5 years ago

Yeah I'm with you in that plain old CSS is still perfectly good. Now with CSS modules and constructable stylesheets it's getting better to make isolated components too.

I think a lot of the love for tailwind are people finally getting the mental OK to remove the strict isolation of style and template/code which has been dogma for 20+ years. If you're using something like vue, svelte, or a good web components library you can just define components with all their markup and style in one place, all using bog standard CSS. It's fine.

yowlingcat• 5 years ago

Love Tailwind. It delivered on the promise of what I always wanted Bootstrap to be. Most notably, the `@apply` directive making it possible for me to refactor out my tailwind utility classes that I prototype with means that I can move fast and not end up with an eventual mess.

I'll echo other folks who have said that using Tailwind has significantly increased how quickly I can put together frontend stuff -- it's close to a 5x speedup for me workflow wise.

WORMS_EAT_WORMS• 5 years ago

This is literally an inline CSS shorthand language now and I love it.

dmlittle• 5 years ago

Yup! I think the biggest win for me is not having to worry about CSS class names. Some people hate the fact that the HTML is now less "clean" but I appreciate not having to context switch or deduce that a child a tag inside a a div.card has a specific styling.

lhorie3• 5 years ago

I may just be being pedantic here, but isn't this AOT rather than JIT? JIT means the optimizer is code that ships as part of the runtime, which is sort of the opposite of what this does.

setr2• 5 years ago

Afaict it’s just incremental recompilation. The usage of JIT seems like a fundamental misunderstanding

lhorie3• 5 years ago

Agreed, incremental recompilation falls squarely in the AOT camp.

colinclerk2• 5 years ago

I've started investigating whether a truly "just in time" variant of Tailwind is reasonable. It's almost like a CSS transpiler - converting tailwind classnames to their CSS form.

You'll probably always want AOT for the "critical css" in the first load, but afterward, JIT might be reasonable.

At a minimum, it should be feasible. You can override Prototype's appendChild, replaceChild, and insertBefore to grab classnames and generate CSS before the DOM is updated. Everyone will tell you this is insane, but it seems to work.

But it's unclear if this leads to something "better" than the AOT solution. It feels like code golf: will the transpiler have less bytes than the CSS generated by a pure AOT solution? The tailwind folks have come up with a really dense way of expressing verbose CSS, so I think it's possible!

No affiliation to Tailwind. Just playing on weekends.

mgkimsal5• 5 years ago

I've posted before, but will throw this out again.

When I'm building, I'm typically using a toolkit like vuetify or bootstrapvue. These are dozens of components - tested, documented, expanded on, and styled (using bootstrap or material design or... whatever).

The 'just to go tailwind!' I keep seeing seems to assume I want to rebuild components (and then test them) which already exist, and are designed to work together. The common refrain is "but all those sites look the same!" but... I can change colors, sizes, and... when needed, a bit more, by going in to the scss (or similar) and recompiling.

I understand the 'purge' stuff in tailwind is nice and useful (tested it firsthand) but the time/effort of rebuilding large sets of components (which are, often, by and large commodity things) is so far a hard sell for me. I was on a team last year that was in their second round of developing their own in-house UI toolkit - basically recreating most of bootstrap-react, but poorly, and with no testing or accessibility, because "bootstrap is bad". They were so far behind they thought they were ahead...

I'm just not grokking all the tailwind love. I've played with it, and yes... I guess anything that you learn and spend time with will, overtime, become 'natural' and save you time.

It's impressive tech, for sure - not trying to downplay it.

qbasic_forever4• 5 years ago

You want a component library like Tailwind UI: https://tailwindui.com/

You're right though that a lot of people who jump straight to tailwind probably don't realize that its low level might be too low for their needs. A higher level component library like bootstrap, tailwind ui, chakra, etc. is a better start in many cases.

weird-eye-issue3• 5 years ago

I actually bought this quite a while back. It is nice, but a far cry from what developers typically consider components. In fact they are just HTML that you have to copy and paste. You have to build the interactivity yourself. I think they have recently started integrating them into some JS frameworks though possibly.

wunderflix2• 5 years ago

I have bought this, too. It's great.

There is also a “free” site, which offers lovely designs: https://tailblocks.cc/

kingdomcome502• 5 years ago

It sounds to me like you are just not the target for something like tailwind. My impression is that you are likely building displays that only require a few different UI components (and probably the ones we all see regurgitated over and over). The kind of UI where the star of the show is the information you are displaying rather than its behavior (of course there is a balance).

But for the kinds of applications I build there simply does not exist a “UI toolkit” that could save me any amount of time worth the hassle of ingesting another library and finagling it to my needs for what? Maybe 15% of my UI? The value in the tools that I build is partly in the UI I make to interact with them.

There is nothing more frustrating than the 5th or 6th time you just need the padding to be a little different to make your component pop, and you have to slog through the docs/source figure out how to adjust 2px...

weird-eye-issue3• 5 years ago

What kinds of applications do you build? It sounds like having pixel perfect components that match exactly what the designers want is a really high priority for you. And that is fine but man it can really make dev go slower than using existing ones and I'm not always sure it's worth it.

omniscient_oce• 5 years ago

Yeah I'm in a similar position. None of the TailwindUI components have the logic built in, it's just the markup so you need to build the components yourself. I like the feel of Adobe Spectrum but it doesn't have exactly all the components that I want so I'd have to make my own components, and the styling looks somewhat complex to modify such that it doesn't look just exactly like theirs.

I'm looking into their react-aria and react-stately libraries which appear to just give you the hooks that power the UI components and then you can supply your own markup.

Tailwind has headless-ui coming out soon which appears to be very similar to the aforementioned two libraries so that may fill the void but it'd be nice to have a something now. At the moment I'm using Tailwind for mainly static informational sites rather than interactive UIs until I get around to making an internal library of components that I can style with tailwind css. At the end of the day it's basically just CSS anyway.

Tade0• 5 years ago

I was on a team last year that was in their second round of developing their own in-house UI toolkit

Every team eventually tries this and fails to some degree, incurring costs along the way.

Also it's a lot like Akin's 39th law of spacecraft design:

https://spacecraft.ssl.umd.edu/akins_laws.html

But replace "launch vehicle" with "in-house UI toolkit".

It baffles me that people time and time again make the judgement that their several months of work are somehow more worth(in terms of effect) than literal man-years put into a decent UI library.

stephen• 5 years ago

Don't want to take away from Tailwind, it's great.

That said, self-promotion disclaimer but if you like inline/utility CSS, and also like TypeScript/React/Emotion, we've got a "Tailwinds-ish" CSS-in-JS library that we've enjoyed so far:

https://github.com/homebound-team/truss

Would love to have people try it out.

chrisweekly• 5 years ago

This looks pretty cool; Bookmarked.

sakopov• 5 years ago

Good god, JIT for CSS... I thought this was one of those joke articles about insane complexity of front-end development.

qbasic_forever4• 5 years ago

Ehhh, systems outside frontend are just as complex. Think of a backend service--you've probably got a low-level TCP/HTTP handler written in a fast systems language like C/C++, then your business logic written in a higher level language like Go/JS/Ruby/etc., and that's interacting with your data layer using a completely different logic-based SQL language (and extra complexity to translate that SQL to your high-level language with an ORM layer), and on top of that you probably have a rules engine for authorization because you realized the systems language was too slow to update and deal with fast-changing business requirements.

This is really not that different from the frontend world where you've got a markup language to define semantics of the view, a logic layer in JS to pull in data with web requests to populate the view, and CSS as a style layer to make the view look good.

Lapsa4• 5 years ago

Don't forget to add CSS type safety with TypeStyle!!!11eleven

mhd• 5 years ago

I downloaded the tailwind-jit repository, and after a good coffee break and "npm install", it's 120 megs. But I'm not that worried, give it a few cycles and we get esbuild for tailwind, which should bring it down to a simple barebones 8 mb Go binary.

tiborsaas2• 5 years ago

Well, they needed to fix a serious issue they created in the first place. Wait till they fix the issues with this too :)

sb82444• 5 years ago

The big advantage of tailwind for me is that it solves responsive design better than any system I've used before. I'm not amazing at frontend styling (I get by), but I feel like a superhero with tailwind css and UI (worth the money)

stanislavb• 5 years ago

What other frameworks have you tried?

sb82444• 5 years ago

Bootstrap 3, Sass, styled-components. I am sure there's more but that's the last few years of stuff

Before Tailwind with PostCSS, I'd probably hand roll some Sass-powered UI, or find a template to base it off of.

habosa3• 5 years ago

That's interesting, I love Tailwind but I think Tailwind's responsive stuff is the messiest part. Do you have any good resources to share about doing effective and maintainable responsive design on a non-toy website using Tailwind?

sb82444• 5 years ago

Not really any advice here. I am using it for my product and it has been basically changing up the design as needed. It's pretty common for me to make use of grid-cols-1 and then something like md:grid-cols-2 or 3 to keep it single column on mobile and multi-column on desktop

encoderer2• 5 years ago

Tailwind: Your HTML will look terrible, but your website will look great.

mef• 5 years ago

I’ll take it

encoderer2• 5 years ago

Same!

Format looks great!

Lapsa4• 5 years ago

Add ViewState to mask the ugliness.

halfmatthalfcat• 5 years ago

I used tailwind for v1 of my marketing site and it seemed fine at the time. Fast forward to when I needed to make some changes and some tags had 10+ modifiers on them including custom ones...it become so hard to figure out what was doing what without massively breaking things. I've since moved back to component libraries for their simplicity.

jerrygoyal• 5 years ago

I tried JIT mode, loved its features like arbitrary styles, but eventually I switched back to default tailwind config.

So, when you use JIT you no longer get all tailwind classes in chrome dev tools only the ones you applied to components. I know it's by design to keep css lightweight. But that also means I can no longer design UI using Chrome dev tools. Only when I apply tw classes directly to component in editor like vscode it reflects the change in browser. this back and forth cycle between editor and chrome took the fun away from me :(

colinclerk2• 5 years ago

This is what inspired me to look into true JIT: https://news.ycombinator.com/item?id=26731816

raihansaputra2• 5 years ago

Somebody already wrote a library for client-side JIT TailwindCSS. and tbh I really want this taken to the extreme and see how much is the overhead compared to shipping + parsing CSS. https://github.com/matyunya/headlong

nickjj• 5 years ago

If anyone is looking for practical examples of using Tailwind + the JIT compiler with various web frameworks and Webpack, I have a few example starter projects at:

- https://github.com/nickjj/docker-flask-example

- https://github.com/nickjj/docker-django-example

- https://github.com/nickjj/docker-node-example

canyonero• 5 years ago

Kudos to the team on the release. I'm a huge fan of allowing CSS via arbitrary class names. I work on team that is in the midst of migrating a large codebase away from custom global CSS (with BEM) to Tailwind. We frequently have to augment our tailwind.config.js file by adding one-off settings and that has always felt wrong. This should solve that pain point.

One area I'd love to see Tailwind tackle is better targeting for child elements. I understand the library is functional and the classes are atomic, but I think being able to chain and target arbitrary children elements would be quite powerful.

nojvek• 5 years ago

I am really a huge fan of esbuild. I know evanw is working on implementing css module support that has the same tree shaking ability as the js bits. This means the bundler only ships the css that is actually used.

I feel tailwind is somewhat going down that path, but I wonder if this is a problem that a bundler can solve.

I use tailwind with tsx react components and it seems the tailwind just-in-time mode won't work with that.

nikisweeting2• 5 years ago

Can someone clarify for an old school CSS person is confused (me). What is the point of doing this:

    <div class="md:top-[-113px]">

Instead of this:

    <div class="md" style="top: -113px">

Why would you want to inline your overrides directly in the class names instead of just using style?

yurishimo• 5 years ago

Your example here is actually a perfect reason.

Inline styles apply all of the time. With a class, you have access to media queries and thus some basic form of logic.

The “md:” prefix is used exactly for this. It applies any following class at a medium media query breakpoint. Same thing with focus or hover styles, also impossible with an inline style attribute.

The custom overrides are obviously more one off and less reusable, so the difference between those and a style attribute are less obvious at first glance. With classes though, you are bound to the class names in your stylesheet and thus some form of sanitization/linting. Inline styles won’t stop you from breaking your design system.

nikisweeting2• 5 years ago

Got it, makes sense, thanks.

mekster• 5 years ago

If you have ever built a responsive design, you will not want to use "style" attribute ever.

franklyt3• 5 years ago

I still don’t get the tailwind hype. To me, I think the relevant parties are invested, myself included. CSS is weird and has had a lot of “answers” appended to it out of desperation, but I’ve been feeling really good about styled-components and/or SASS modules, probably slightly in favor of the former, using file based code splitting. I’ve seen the explanations countless times, but if you were to ask me to advocate for tailwind right now, I’d find it difficult to highlight the advantages. The answers don’t immediately jump out at me, the problem we’re solving doesn’t seem immediately apparent, so I have trouble advocating for or understanding the tech. “You can build stuff quickly!” - doesn’t this just sound like someone comfortable with raw CSS? “You don’t need to context-switch!” - these are shorthand classes, not JS or JSX. The language isn’t uniform here.

Note: I’ve written a lot of CSS and generally prefer rolling my own components to using a library... perhaps I’m not the target audience. Perhaps this is a cherry flavor to make the “designing your own UI” medicine go down more easily. Perhaps I’m mistaken and not being charitable enough, too.

Lapsa4• 5 years ago

I share similar sentiment. Also - about TypeScript (but that one's bit more complicated to argument).

chakhs• 5 years ago

having a type system reduces the bug space, so there's an objective argument for it. I don't see such arguments for tailwind, it's more subjective

franklyt3• 5 years ago

I definitely don't agree with the comparison; I love TypeScript and find its utility easy to elucidate.

patates• 5 years ago

Many people had to try it to really understand what the hype is all about, so it's pretty clearly difficult to explain.

If you give the combination of Tailwind + Alpine.js + your favorite server-side templating engine a try, it may just click. At least for me, that was the key.

franklyt3• 5 years ago

To me, it seems like a really bad sign if something that is supposed to solve a problem is “hard to explain”, almost like it doesn’t actually solve any problem and just ropes you in with familiarity.

My assessment is based on the fact that when you design something, you generally have to be able to explain its value, with little exception.

fouc• 5 years ago

Think of tailwindcss an html-level "API" to a Design System - it provides a consistent color scheme, consistent padding/spacing, it uses a familiar naming scheme that aligns closely with the the original CSS naming. It's also easy enough to extend with your own customizations as well, particularly once you get a grasp on the advantages of atomic CSS [0].

[0] https://johnpolacek.github.io/the-case-for-atomic-css/

ath92• 5 years ago

I think frameworks like tailwind are great for rolling your own components actually. Tailwind sits somewhere between just writing your own styles from scratch and using a css component library like Bootstrap. It provides you with sensible atomics (e.g. a nicely defined range of margins/paddings that allow you to create UIs with consistent spacing), but it still allows you to mix and match where needed.

This approach allows tailwind to be terser than raw inline styles, while giving you the ability to write a lot of your styling inside the markup, which prevents context-switching. It's a nice balance between many of the approaches that have come before it.

antihero• 5 years ago

I think the fantastic thing about is the natural feeling constraints that it gives you, and not having to think about naming stuff or building out a CSS project (with standards etc) that scales at-all well (which is often a suprising amount of fuckery).

If you're using styled components and you want a small margin you have to do something along the lines of.

    const ThingWithMargin = div.styled`
      margin: ${margins[1]}
    `;

Presuming you've set up a file full of font sizes, margins, paddings.

In TailwindCC you get a bunch of very sane, well picked defaults chosen for you for free, by default. You write in a simple DSL and don't have to worry. You can update the defaults as you see fit, too.

    <div className="m-1" />

This has autocomplete, etc etc.

IF you don't want the clutter of all these utilities, you can abstract them away into smaller components as you already should be doing. You build your component library with speed and can focus on the actually interesting parts of your system as opposed to wasting time naming stuff or pissing about with CSS.

And of course, if your div is reused a lot, you naturally abstract it into a component at a time that suits you!

I'd say try just using for a project or two and you suddently realise you were wasting a whole lot of time and effort before.

Anything truly dynamic calculated can go also into a style= prop. They work great together!

E.g. here's a progress bar I made for a thing:

    <div
      ref={ref}
      className="w-full relative cursor-pointer -mt-1 -mb-1.5 h-3.5"
      onMouseDown={onMouseDown}>
      <div className="absolute h-1 top-1 bg-gray-600 bottom-0 left-0 right-0" />
      <div
        className="absolute h-1 top-1 bottom-0 left-0 bg-gray-200"
        style={{
          width: `${(currentTime / duration) * 100}%`,
        }}></div>
    </div>

I was so sick of working web because it felt like working in CSS was a total footgun unless you spend a lot of time making a solution that does things right. Now I find working on web projects a joy again.

runarberg3• 5 years ago

When I write a component that takes a smaller margin I write something like this:

    my-component {
      margin-inline: var(--margin-thin);
    }

If I want this dense notation I can name the custom property `--m-1`. In most IDEs (or language servers) I’ve tried custom properties also have autocomplete.

That is I use CSS custom properties inside component scoped styles. (Component scoped styles is what I call the general idea that React’s styled components are implementing, but Vue’s SFC and the shadow DOM scope the styles to the component at hand equally well).

I’m not saying “Don’t use Tailwind; use custom properties instead”. But for those of us that don’t like the idea that Tailwind brings, there are options, and we are perfectly happy with what we got.

armonraphiel• 5 years ago

Tailwind is quite convenient for standard web projects. The advantages are less apparent in React projects, especially if you use styled-components or robusts frameworks like ChakraUI.

s__s• 5 years ago

What I don’t get is that everyone is always acting like Tailwind invented this approach to CSS. It’s been a thing for at least 6 years or more, far before tailwind. Granted I suppose they have really brought it to the mainstream.

As someone who’s used this approach in production for years I can vouch for it. It greatly reduces complexity and is easier to maintain. Day to day no one is writing any css at all, nor are they bogged down with naming conventions, etc. You just “snap” together your utility classes ad-hoc as needed.

Responsive breakpoints are also much easier to work with because they’re just “built in” as modifiers on all the base utility classes.

idkwhoiam• 5 years ago

Utility css frameworks seem to boost productivity but was that ever a problem? IMO the big problem with CSS is maintainability. I was all hype about Tailwind CSS until I had to go back to a project and make adjustments. This soup of CSS classes is no better than a long regexp.

Vuska• 5 years ago

This is something of an aside, but the design of Tailwind CSS classes inadvertently (or perhaps not) makes developing custom user styles nearly impossible.

When Laravel refreshed its documentation design, I wrote a stylesheet to revert it almost entirely to the old design. I could do it because restyling something like `.sidebar` is super simple. The new class list is

    fixed top-0 bottom-0 left-0 z-20 h-full w-16 flex flex-col bg-gradient-to-b from-gray-100 to-white transition-all duration-300 overflow-hidden lg:sticky lg:w-80 lg:flex-shrink-0 lg:flex lg:justify-end lg:items-end 2xl:max-w-lg 2xl:w-full

And that is much harder to maintain in a user style.

TailwindCSS JIT with arbitrary values

Related Stories