TailwindCSS v2.0

Post by thirdsun » Tue, Nov 24, 2020, 1:08 PM UTC

stanmancan wrote: post #446

pembrook wrote: post #360

Earlier quoted context omitted.

It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2…

If you are using Tailwind then your designers need to be aware of its presets and be designing with them in mind. When it comes to code reuse, either extract the button to a component that you reuse, or extract it to a class in tailwind. .btn { @apply px-4 py-2 rounded } Now you can just add the btn class and you’re done. If you ever want to change that button you can just update it and be done. If you want a button…

    .btn { padding: 4rem 2rem; border-radius: 2rem; }

    .btn { @apply px-4 py-2 rounded }

Post by iaml » Fri, Nov 27, 2020, 10:37 AM UTC

mercer wrote: post #456

iaml wrote: post #384

Earlier quoted context omitted.

There's another approach that is more rooted into react paradigm - styled-components. I still don't understand what people see in tailwind as most of the arguments I see in this thread could also be applied to it, but you also get type-checking (typescript), theming, ecosystem of plugins and a lot of other cool things.

I agree that styled-components takes care of a bunch of issues that make some of us reach for Tailwind. However, aside from requiring a very specific tech stack, it doesn't solve the problem of every component potentially having slightly differing styles. There's ways to handle this, but one thing I like about Tailwind is that the defaults are stronger across components, while still leaving space to deal with all the…