Tailwindcss is beautiful 👌

If you’re not a fan of writing manual css then Tailwindcss can save you a lot of time.

And it’s beautiful. 👌

Comments

[JoelBonetR 🥇]

Hahaha no problem, we all can have bad days/weeks 😅🤷🏻‍♀️

I just ignore anything related to job as much as I can when I feel like that.

I'll try to do it during this week (can't promise it will be before the weekend) and share you the repo 😁

Cheers!

[Brady Walters]

Tailwind is most helpful for me at mobile first layouts that change multiple times as the screen size increases toward a 27” desktop monitor.

[Mike Pearson]

Inline CSS with extra steps

[decker]

Thats bullshit. You can do it always wrong with ever tool.

Compare these

<button type="button" class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Button</button>

vs

<button type="button" class="default-button">Button</button>

So tell me, what is better to understand and what is faster?
Obviously the second one, or not?

[JoelBonetR 🥇]

I'm a bit confused as you wrote that in another comment related to tailwind:

1. Classes can use media queries
2. Classes limit repeating CSS
3. Classes allow caching stylesheets longer than the HTML that changes more often.
4. Classes can include multiple properties at once.
5. Classes support pseudo selectors and pseudo elements etc.
6. Classes can define keyframes for animation
7. Sticking to only classes help with specificity issues.
8. Classes (stylesheets) can be processed with Post-CSS, SASS etc. Which Tailwind generates classes for media queries etc.
9. Utility classes don't grow your CSS over time. Much easier to maintain. You're not naming, writing and trying to reuse classes made by someone else.
10. Classes can apply to new HTML in WYSIWYGS.
11. Utility classes are easier to document and learn. BONUS: editor / lint support. You get autocomplete to find what you need, and the raw CSS definition.
12. Utility classes force sticking to design conventions. I.E. all margin and padding is 8px increments, super easy to configure in Tailwind. One can't use some random color either.

And every single point can be reached with regular css/Sass/Scss (that's what's behind Tailwind after all).

I always define the concepts when I feel it necessary, not specifically for you but for anyone who can reach that. This is a forum and not a 1 to 1 conversation.

I'm a Lead Dev/Tech Lead and don't get offended by any of this, thought we were taking into account that newbies can read that and get some basic knowledge about this topic.

If you think so, maybe I've not enough knowledge of Tailwind (used it only once in a tiny project to see what's that about -surface knowledge-) and you (as you said) have not enough knowledge about Styled-Components.

Would you like to do a little challenge? I can write a public repo with Next JS and styled-components using some public API, trying to include all available features and you can re-code a variant using Tailwind so we both get more knowledge of those techs while seeing the pros and cons of each.

I'm hands on 3 projects at once but I'm sure I can get some time. If you (or anyone reading this) feel like it's a good idea I'll put myself hands on asap. 👌😁 You name it.

[NeilFranci]

I'm using both tailwind and scss. I only use tailwind for small components that doesn't need to do with complicated style, animation I use scss for big thing, animation... Because when I read the tailwind docs first seem cool, fast, very easy to use. But when scrolling down, too much setup and I a person who already struggling with the components logic I prefer to keep big thing in scss instead of hard setup thing.

[JoelBonetR 🥇]

Then maybe you should take a try.

A class is a common set of property-value pairs that will be applied to every HTML tag with this class name inside it's class attribute whereas components define visual chunks of your views semantically.

A button will always be a button, right?
Using classes you usually end up with something like:

<button class='btn btn-rounded btn-info'>Edit</button>
<button class='btn btn-rounded btn-warning'>Delete</button>

The btn class would be the basic styling for your buttons, btn-rounded would be a modifier and btn-warning would be a font/color definition.
(Of course you can use "btn rounded warning" but the intellisense will be angry).

Example with styled-components:

<Button appearance="rounded" color="warning" text=`${text}` />

You can programatically or conditionally set values into it, even using states, and the Button component will host every possible definition so it's scoped in a single place.

Anytime you need to extend the button component you simply head yourself to the Button component file and that's all.

<Button appearance="rounded" color=`${error ? 'warning' : 'success' }` text=`${text}` />

You can also import base templating configuration set on a JS const/variable, including breakpoint related things for those media queries and so on (break point naming related with pixel range, max-container width, item gap...)

[JoelBonetR 🥇]

Still can't see any advantage of tailwind over styled components, where you define semantic namings to call visual components to reuse with a custom set of props -or not-, having all those benefits plus using standard CSS on it (or Sass, SCSS...) instead arbitrary presets of utility classes that the entire team would need to learn at the top web standards.

If using React, Preact, NextJS... Using tailwind seems just unpractical in comparison.

I'd say though that it could be a good tool on places where the compatibility with styled components has not arrived yet, even it's just to keep your project as clean of unused CSS as possible.

Maybe Svelte, Vue or Angular are good candidates for it, didn't analysed it as I'm on React/Next since some years ago.

[Benjamin Rukundo]

What learning resources have you been using for it?

[decker]

You say Tailwind will not scale because you say CSS does not scale. It is called logic deduction. Tailwind depends on CSS, and CSS does not scale, you say, so we have Tailwind does not scale. Understood?