from Hacker News

TailwindCSS JIT with arbitrary values

by ccmcarey on 4/7/21, 6:05 PM with 123 comments

  • by Yabood on 4/7/21, 7:34 PM

    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.

  • by franklyt on 4/8/21, 6:36 AM

    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.

  • by jerrygoyal on 4/7/21, 10:17 PM

    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 :(

  • by mgkimsal on 4/7/21, 8:50 PM

    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.

  • by sb8244 on 4/7/21, 9:08 PM

    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)

  • by lhorie on 4/7/21, 8:49 PM

    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.

  • by sam_goody on 4/7/21, 7:19 PM

    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.

  • by halfmatthalfcat on 4/7/21, 10:00 PM

    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.

  • by yowlingcat on 4/7/21, 8:47 PM

    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.

  • by sakopov on 4/7/21, 9:05 PM

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

  • by davzie on 4/7/21, 8:19 PM

    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.

  • by NiceWayToDoIT on 4/7/21, 8:21 PM

    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.

  • by stephen on 4/7/21, 9:00 PM

    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.

  • by Kaze404 on 4/7/21, 6:52 PM

    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 :)

  • by encoderer on 4/7/21, 9:37 PM

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

  • by nojvek on 4/8/21, 12:19 AM

    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.

  • by Vuska on 4/8/21, 3:59 PM

    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.

  • by canyonero on 4/7/21, 10:55 PM

    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.

  • by nikisweeting on 4/8/21, 5:22 AM

    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?

  • by gvkhna on 4/7/21, 7:06 PM

    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.

  • by idkwhoiam on 4/8/21, 10:47 AM

    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.

  • by nickjj on 4/7/21, 10:22 PM

    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

  • by jackconsidine on 4/7/21, 8:17 PM

    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?

  • by WORMS_EAT_WORMS on 4/7/21, 8:48 PM

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