01brett

Joined 5 years ago

Karma

122

Submissions

Member since

Dec 17

View on Hacker News

Recent submissions

Comment · 5 years ago

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',
  }

Comment · 5 years ago

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

Comment · 5 years ago

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.

Comment · 5 years ago

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.

Comment · 5 years ago

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...

Comment · 5 years ago

Author here, have you looked at twin.macro?

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

Comment · 5 years ago

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/

Comment · 5 years ago

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")} />

Comment · 5 years ago

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.

Comment · 5 years ago

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...

Comment · 5 years ago

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.

Comment · 5 years ago

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/

Comment · 5 years ago

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

Comment · 5 years ago

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.

Comment · 5 years ago

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