12 ms·

TailwindCSS JIT with arbitrary values

145 points by ccmcarey 6y ago

Kaze404 6y 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 :)
gvkhna 6y 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 6y 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.
  - smoe 6y 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/ 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.
  - leipert 6y ago
    There are, e.g. this prettier plug-in: https://www.npmjs.com/package/prettier-plugin-tailwind https://www.npmjs.com/package/prettier-plugin-tailwind or headwind: https://github.com/heybourn/headwind https://github.com/heybourn/headwind
  - tpetry 6y ago
    This may sound strange first, but there is nothing to argue in a team about if you sort them alphabetically.
    - vsareto 6y ago
      I like it. Simple and predictable.
    - gvkhna 6y ago
      I agree. Also the reason for alphabetical ordering is typically adding in lines will not cause additional changes in git blame.
    - earthboundkid 6y ago
      That was what I did with CSS properties, but it doesn’t fit as well with Tailwind.
  - jzeltman 6y ago
    Check out this extension for VSCode which organizes your classes on save. https://marketplace.visualstudio.com/items?itemName=heybourn.headwind 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 6y 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
    - gvkhna 6y ago
      I like this a lot actually, considering JIT maybe data attributes or some tighter integration into react could easily be done so there isn’t so much reliance on class names.
  - gvkhna 6y 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.
  - earthboundkid 6y 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.
  - jfleck 6y ago
    https://github.com/fleck/class-types.macro#auto-reorder-classes-via-eslint-pluginrule https://github.com/fleck/class-types.macro#auto-reorder-clas... The order I ended up going with was to match tailwind's output order.
- jfleck 6y 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-formatting-for-long-classes https://github.com/fleck/class-types.macro#better-prettier-f...
- rubans 6y 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 https://github.com/heybourn/headwind
sam_goody 6y 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 6y 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.
- Lapsa 6y ago
  "The second was the lack of the !important selector." sounds like a red flag.
- thrixton 6y ago
  Any good resources on getting it working with Angular and Material?
- habosa 6y 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 6y 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 6y ago
  That and a baby: https://twitter.com/adamwathan/status/1379437055516680202 https://twitter.com/adamwathan/status/1379437055516680202 Congrats to him!
davzie 6y 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 6y ago
  Exactly my experience, haters gonna hate... For CSS, I'd argue it _is_ the best thing since sliced bread
- hardwaregeek 6y ago
  That's...the most interesting way I've seen of saying you like someone's work.
- Ashanmaril 6y 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 6y ago
  It's all fun and games until you're in the prison shower with a bunch of Bootstrap goons
  - deleted 6y ago
    [deleted]
- Swizec 6y ago
NiceWayToDoIT 6y 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_forever 6y 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 6y 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 6y ago
This is literally an inline CSS shorthand language now and I love it.
- dmlittle 6y 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.
lhorie 6y 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.
- setr 6y ago
  Afaict it’s just incremental recompilation. The usage of JIT seems like a fundamental misunderstanding
  - lhorie 6y ago
    Agreed, incremental recompilation falls squarely in the AOT camp.
    - raihansaputra 6y ago
      Thing is, what they had before is also defined as AOT (of the build step) too. JIT here refers to the Just-In-Time for the build, not for the client. Saying it JIT is clearer in the context if Tailwind, but not in general. This is one of the reasons FE JS ecosystem is confusing as this also happens with the code (ex: process.env for environment variables only exists in the build step, not in the browser, but the code is mingled in the same file).
      - setr 6y ago
        Deviation between build-time and run-time is...normal. The fact that JS is a dynamic language that doesn't necessarily require a build step, but we've introduced one anyways, doesn't really change the equation. It's still exactly the same problem as building a C codebase versus running it. The reason the FE JS ecosystem is confusing is because there's this absurd pretense that they're doing something novel whenever they implement a feature or tooling that has existed for decades (just not for JS). And then, because its novel, they come up with new names (or misuse old names, like here) because they either intentionally or unintentionally avoid using the 1:1 mapping with standard tooling. Just-In-Time for the build just doesn't make sense -- a JIT is a very specific thing; it compiles code at runtime. The term exists specifically to differentiate from compilation at build-time. If you make a JIT for build-time, you've lost all meaning This is just rebuilding the code more often... through a filewatcher.
mgkimsal 6y 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_forever 6y ago
  You want a component library like Tailwind UI: https://tailwindui.com/ 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-issue 6y 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.
    - 6y ago
stephen 6y 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 https://github.com/homebound-team/truss Would love to have people try it out.
- chrisweekly 6y ago
  This looks pretty cool; Bookmarked.
sakopov 6y ago
Good god, JIT for CSS... I thought this was one of those joke articles about insane complexity of front-end development.
- qbasic_forever 6y 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.
- Lapsa 6y ago
  Don't forget to add CSS type safety with TypeStyle!!!11eleven
- mhd 6y 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.
- tiborsaas 6y ago
  Well, they needed to fix a serious issue they created in the first place. Wait till they fix the issues with this too :)
sb8244 6y 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 6y ago
  What other frameworks have you tried?
  - sb8244 6y 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.
- habosa 6y 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?
  - sb8244 6y 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
    - habosa 6y ago
      Ok that's what I'm doing too! It always works but also feels a bit messy and when I want to make a change it ends up being hard to untangle all the nested selectors.
      - 6y ago
encoderer 6y ago
Tailwind: Your HTML will look terrible, but your website will look great.
- mef 6y ago
  I’ll take it
  - encoderer 6y ago
    Same! Format looks great!
- Lapsa 6y ago
  Add ViewState to mask the ugliness.
halfmatthalfcat 6y 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.
- deleted 6y ago
  [deleted]
jerrygoyal 6y 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 :(
- colinclerk 6y ago
  This is what inspired me to look into true JIT: https://news.ycombinator.com/item?id=26731816 https://news.ycombinator.com/item?id=26731816
  - raihansaputra 6y 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 https://github.com/matyunya/headlong
nickjj 6y 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-flask-example - https://github.com/nickjj/docker-django-example https://github.com/nickjj/docker-django-example - https://github.com/nickjj/docker-node-example https://github.com/nickjj/docker-node-example
canyonero 6y 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 6y 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.
nikisweeting 6y 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 6y 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.
  - nikisweeting 6y ago
    Got it, makes sense, thanks.
- mekster 6y ago
  If you have ever built a responsive design, you will not want to use "style" attribute ever.
franklyt 6y 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.
- Lapsa 6y ago
  I share similar sentiment. Also - about TypeScript (but that one's bit more complicated to argument).
  - chakhs 6y 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
  - franklyt 6y ago
    I definitely don't agree with the comparison; I love TypeScript and find its utility easy to elucidate.
- patates 6y 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.
T3RMINATED 6y ago
friends dont let friends use tailwind... their syntax is bloat
idkwhoiam 6y 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 6y 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.

145 points by ccmcarey 6y 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 :)

gvkhna 6y 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 6y 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.
- smoe 6y 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/ 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.
- leipert 6y ago
  There are, e.g. this prettier plug-in: https://www.npmjs.com/package/prettier-plugin-tailwind https://www.npmjs.com/package/prettier-plugin-tailwind or headwind: https://github.com/heybourn/headwind https://github.com/heybourn/headwind
- tpetry 6y ago
  This may sound strange first, but there is nothing to argue in a team about if you sort them alphabetically.
  - vsareto 6y ago
    I like it. Simple and predictable.
  - gvkhna 6y ago
    I agree. Also the reason for alphabetical ordering is typically adding in lines will not cause additional changes in git blame.
  - earthboundkid 6y ago
    That was what I did with CSS properties, but it doesn’t fit as well with Tailwind.
- jzeltman 6y ago
  Check out this extension for VSCode which organizes your classes on save. https://marketplace.visualstudio.com/items?itemName=heybourn.headwind 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 6y 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
  - gvkhna 6y ago
    I like this a lot actually, considering JIT maybe data attributes or some tighter integration into react could easily be done so there isn’t so much reliance on class names.
- gvkhna 6y 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.
- earthboundkid 6y 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.
- jfleck 6y ago
  https://github.com/fleck/class-types.macro#auto-reorder-classes-via-eslint-pluginrule https://github.com/fleck/class-types.macro#auto-reorder-clas... The order I ended up going with was to match tailwind's output order.
jfleck 6y 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-formatting-for-long-classes https://github.com/fleck/class-types.macro#better-prettier-f...
rubans 6y 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 https://github.com/heybourn/headwind

sam_goody 6y 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 6y 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.

Lapsa 6y ago
"The second was the lack of the !important selector." sounds like a red flag.
thrixton 6y ago
Any good resources on getting it working with Angular and Material?
habosa 6y 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 6y 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 6y ago
That and a baby: https://twitter.com/adamwathan/status/1379437055516680202 https://twitter.com/adamwathan/status/1379437055516680202 Congrats to him!

davzie 6y 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 6y ago
Exactly my experience, haters gonna hate... For CSS, I'd argue it _is_ the best thing since sliced bread
hardwaregeek 6y ago
That's...the most interesting way I've seen of saying you like someone's work.
Ashanmaril 6y 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 6y ago
It's all fun and games until you're in the prison shower with a bunch of Bootstrap goons
- deleted 6y ago
  [deleted]
Swizec 6y ago

NiceWayToDoIT 6y 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_forever 6y 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 6y 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 6y ago

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

dmlittle 6y 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.

lhorie 6y 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.

setr 6y ago
Afaict it’s just incremental recompilation. The usage of JIT seems like a fundamental misunderstanding
- lhorie 6y ago
  Agreed, incremental recompilation falls squarely in the AOT camp.
  - raihansaputra 6y ago
    Thing is, what they had before is also defined as AOT (of the build step) too. JIT here refers to the Just-In-Time for the build, not for the client. Saying it JIT is clearer in the context if Tailwind, but not in general. This is one of the reasons FE JS ecosystem is confusing as this also happens with the code (ex: process.env for environment variables only exists in the build step, not in the browser, but the code is mingled in the same file).
    - setr 6y ago
      Deviation between build-time and run-time is...normal. The fact that JS is a dynamic language that doesn't necessarily require a build step, but we've introduced one anyways, doesn't really change the equation. It's still exactly the same problem as building a C codebase versus running it. The reason the FE JS ecosystem is confusing is because there's this absurd pretense that they're doing something novel whenever they implement a feature or tooling that has existed for decades (just not for JS). And then, because its novel, they come up with new names (or misuse old names, like here) because they either intentionally or unintentionally avoid using the 1:1 mapping with standard tooling. Just-In-Time for the build just doesn't make sense -- a JIT is a very specific thing; it compiles code at runtime. The term exists specifically to differentiate from compilation at build-time. If you make a JIT for build-time, you've lost all meaning This is just rebuilding the code more often... through a filewatcher.

mgkimsal 6y 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_forever 6y ago
You want a component library like Tailwind UI: https://tailwindui.com/ 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-issue 6y 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.
  - 6y ago

stephen 6y 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 https://github.com/homebound-team/truss Would love to have people try it out.

chrisweekly 6y ago
This looks pretty cool; Bookmarked.

sakopov 6y ago

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

qbasic_forever 6y 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.
Lapsa 6y ago
Don't forget to add CSS type safety with TypeStyle!!!11eleven
mhd 6y 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.
tiborsaas 6y ago
Well, they needed to fix a serious issue they created in the first place. Wait till they fix the issues with this too :)

sb8244 6y 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 6y ago
What other frameworks have you tried?
- sb8244 6y 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.
habosa 6y 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?
- sb8244 6y 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
  - habosa 6y ago
    Ok that's what I'm doing too! It always works but also feels a bit messy and when I want to make a change it ends up being hard to untangle all the nested selectors.
    - 6y ago

encoderer 6y ago

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

mef 6y ago
I’ll take it
- encoderer 6y ago
  Same! Format looks great!
Lapsa 6y ago
Add ViewState to mask the ugliness.

halfmatthalfcat 6y 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.

deleted 6y ago
[deleted]

jerrygoyal 6y 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 :(

colinclerk 6y ago
This is what inspired me to look into true JIT: https://news.ycombinator.com/item?id=26731816 https://news.ycombinator.com/item?id=26731816
- raihansaputra 6y 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 https://github.com/matyunya/headlong

nickjj 6y 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-flask-example - https://github.com/nickjj/docker-django-example https://github.com/nickjj/docker-django-example - https://github.com/nickjj/docker-node-example https://github.com/nickjj/docker-node-example

canyonero 6y 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 6y 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.

nikisweeting 6y 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 6y 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.
- nikisweeting 6y ago
  Got it, makes sense, thanks.
mekster 6y ago
If you have ever built a responsive design, you will not want to use "style" attribute ever.

franklyt 6y 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.

Lapsa 6y ago
I share similar sentiment. Also - about TypeScript (but that one's bit more complicated to argument).
- chakhs 6y 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
- franklyt 6y ago
  I definitely don't agree with the comparison; I love TypeScript and find its utility easy to elucidate.
patates 6y 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.

T3RMINATED 6y ago

friends dont let friends use tailwind... their syntax is bloat

idkwhoiam 6y 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 6y 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.