01brett

no profile record

Submissions

Goodbye CSS Modules, Hello TailwindCSS

172 pointsby 01brett5 lat temu220 comments

comments

5 lat temudiscuss

Absolutely. The Tailwind config makes this really powerful to extend or override. You can reuse the same API for things like spacing with your own values/scale or make your own.

The Tailwind docs get into it a bit as you can see here: https://tailwindcss.com/docs/configuration#theme

Here is the spacing section in my config where I've extended the default with interstitial values. What's really cool is these propagate to all the spacing utilities (padding, margin, margin between, etc)

  spacing: {
      0.75: '0.1875rem',
      1.25: '0.3125rem',
      1.75: '0.4375rem',
      2.25: '0.5625rem',
      2.75: '0.6875rem',
      3.25: '0.8125rem',
      4.5: '1.125rem',
      4.75: '1.1875rem',
  }

5 lat temudiscuss

Chakra is excellent. I recommend it for any React devs considering Bootstrap. It's doubly useful if you don't have a designer.

5 lat temudiscuss

Author here, it depends on what your designer has made. Our designer was using the Tailwind Figma file for the redesign with most of the defaults in place. We added our brand green and a different font to the default config.

When I was working through some of the component structures and spacing, the designer explained to me which Tailwind values he used most often and in what scenarios. For example, spacing around sections/containers was 24px or p-6; spacing within sections (like between form inputs) was 12px or p-3; and spacing within elements (like between button icon and text) was 6px or p-1.5.

While these were not absolutes in the redesign, they greatly sped up my scaffolding and allowed my first passes to be either dead-on or close enough to reason about. And when it was close enough (but not dead-on), toggling up or down a value usually settled it to match the mocks.

Personally, this was the easiest time I've had for getting an implementation "pixel perfect." I chalk this up as a design system win more than Tailwind. Any well-defined design system would open up these collaboration benefits. I found Tailwind to be an asset to these both for my own DX and for collaboration with my designer. I think Theme UI or styled-components could fit that goal just as well.

5 lat temudiscuss

I haven't heard of Pollen before. I don't think it was what I was thinking of. Thanks for sharing though. Pollen looks really interesting.

5 lat temudiscuss

Author here, I am eagerly awaiting the next version of Create React App. I'm hoping the upgraded internals will remove the need for CRACO. Here's a link to CRA v5 on Github:

https://github.com/facebook/create-react-app/milestone/81?cl...

5 lat temudiscuss

Author here, have you looked at twin.macro?

https://github.com/ben-rogerson/twin.macro

5 lat temudiscuss

Author here, I would also highly recommend Josh Comeau's CSS for JS Devs course. He covers fundamentals useful in all styling approaches.

https://css-for-js.dev/

5 lat temudiscuss

Author here, I am using React. What I've done for "it shares some styles but not others" is create a

  const sharedStyles = "..."

and in my component combine the shared with the unique attributes

  <CoolComponent className={`${sharedStyles} py-3`} />

or using a string combiner utility like classNames/clsx

  <CoolComponent className={clsx(sharedStyles, "py-3")} />

If you have a props to change on, you can do this

  <CoolComponent className={clsx(sharedStyles, someProp ? "py-3" : "py-4")} />

5 lat temudiscuss

Author here, would you be interested to read a deep dive of how I'm using Tailwind? I wanted to include it here, but the addition made the post unbearably long.

Also, if you have written about your design system implementation with CSS Modules and CSS variables, I'd love to read it.

5 lat temudiscuss

Author here, I have a few custom classes that look like more traditional CSS. Tailwind gives an example[0] of how to do this in their docs. I have about 15 of these extracted classes. I use them for common styling patterns, such as transforming "flex items-center justify-center" to "flex-center," or to unify styling on components I haven't abstracted into a styled version, such as "listbox-option" or "flyout."

[0] https://tailwindcss.com/docs/extracting-components#extractin...

5 lat temudiscuss

Author here, I will add my kudos for the Tailwind API. The more I've used it and internalized its structure, the more I appreciate the care and effort of its API.

5 lat temudiscuss

Author here, I haven't had time to play around with it, but this library[0] from Atlassian looks like a "best of the both worlds" styling approach: CSS-in-JS authorship without the runtime penalty.

[0] https://compiledcssinjs.com/

5 lat temudiscuss

Author here, most of the non-Tailwind CSS I write is browser-specific tweaks or hacks, and mostly for Safari.

5 lat temudiscuss

Author here, while it's not the default, newer versions of Tailwind have an experimental Just In Time mode, which inverts the approach to generate styles as you type them rather than upfront. Using JIT has greatly sped up my development workflow. Changing the config is significantly faster than in normal mode.

5 lat temudiscuss

Author here, I am a big fan of Tachyons, too. It was my first introduction to utility-class CSS as a styling philosophy.

5 lat temudiscuss

Author here, I just looked at our frontend build and Create React App bundles our CSS into one big {webpack-hash}.css. It scales well for us because the frontend is a single page app.

5 lat temudiscuss

Author here, CSS variables change the landscape in terms of what is possible. I think Theme UI (CSS-in-JS) uses them heavily under the hood. I can't think of the name, but I saw a CSS framework on HN some months back that is almost exclusively CSS variables. Plenty of unexplored territory there.

5 lat temudiscuss

Author here, Agreed. It feels like as big of a revelation as the original execution of Tailwind.

5 lat temudiscuss

StopTheMadness would be a great addition to iOS Safari.

https://lapcatsoftware.com/articles/StopTheMadness.html