TailwindCSS is great for React or any time you have custom "HTML" components. Standalone CSS is great for applying many styles to the same webpage, styling someone else's webpage, styling...
TailwindCSS is great for React or any time you have custom "HTML" components.
Standalone CSS is great for applying many styles to the same webpage, styling someone else's webpage, styling Markdown-to-HTML. In fact I'm pretty sure that's exactly the kind of use cases CSS was originally designed for. CSS non-inline styles are not worth it when you apply a different class to every individual element, and a lot of your layout and styling is in the HTML anyways.
The idea of separating content from style is good but doesn't work out for "Web 2.0" webpages. In that case "content without style" are the API requests.
Trailer They also did a YouTube video to cover all the new changes. You can read the patch notes on GitHub. They also remade their docs website. This release is quite great with the just in time...
This release is quite great with the just in time mode now being the default. It's a game changer in how it improves the development workflow. Having to work with purge CSS in the past was the worst part of Tailwind.
You can check this video on how a custom design can be implemented.
It's been asked a million times but I can attempt to give you an idea. (btw you can read their front page https://tailwindcss.com/ where they make the case for themselves.) Tailwind is at it's...
It's been asked a million times but I can attempt to give you an idea. (btw you can read their front page https://tailwindcss.com/ where they make the case for themselves.)
If you've done CSS in the past in a big project, it's pretty common to work outside of a design system. You can quickly end up with many colors that are meant to achieve the same goal. Maybe you end up with many different spacing in your layout between all your pages. What Tailwind brings is a discipline. You define a single configuration and from that config many values are derived. Unlike inline styles, Tailwind doesn't allow any random values, it only allows you to work within your design system. If you don't define a custom design system then you'll be working with the values that were picked by their in-house designers. A bit more obvious than that, inline styles don't allow for media queries, this means that you can't do a responsive layout with many breakpoints using only inline styles.
Unlike a lot of other CSS frameworks, out of the box Tailwind applies something they call preflight. It disables every single style on every HTML elements. To style something, you add what you need to it. If a button should be rounded with a green background and white text, then those are the classes that the element will have. You don't have the usual specificity issue that you'd run into with other CSS frameworks when you implement your custom designs.
There's a lot more to it, but that's the basic idea.
It is basically inline styling, but with a built-in "design system" paradigm (so you don't throw random px values or hex colors at stuff) and a few defaults. It's nothing you can't do with your...
It is basically inline styling, but with a built-in "design system" paradigm (so you don't throw random px values or hex colors at stuff) and a few defaults. It's nothing you can't do with your CSS pre-processor of choice if you spend a few hours writing mixins and whatnot, but it's easier to just download Tailwind and configure it for your design instead.
https://2021.stateofcss.com/en-US/technologies/css-frameworks/ Looks like Tailwind CSS is doing good this year too with 78% user satisfaction. It also got a surprising usage bump from 26% of...
Looks like Tailwind CSS is doing good this year too with 78% user satisfaction. It also got a surprising usage bump from 26% of respondents to 39% this year.
TailwindCSS is great for React or any time you have custom "HTML" components.
Standalone CSS is great for applying many styles to the same webpage, styling someone else's webpage, styling Markdown-to-HTML. In fact I'm pretty sure that's exactly the kind of use cases CSS was originally designed for. CSS non-inline styles are not worth it when you apply a different class to every individual element, and a lot of your layout and styling is in the HTML anyways.
The idea of separating content from style is good but doesn't work out for "Web 2.0" webpages. In that case "content without style" are the API requests.
Trailer
They also did a YouTube video to cover all the new changes.
You can read the patch notes on GitHub.
They also remade their docs website.
This release is quite great with the just in time mode now being the default. It's a game changer in how it improves the development workflow. Having to work with purge CSS in the past was the worst part of Tailwind.
You can check this video on how a custom design can be implemented.
I've never really understood Tailwind CSS - is it like slightly-nicer inline styling?
(I'm sure this question has been asked a million times)
It's been asked a million times but I can attempt to give you an idea. (btw you can read their front page https://tailwindcss.com/ where they make the case for themselves.)
Tailwind is at it's core a design system build system. This is shown pretty well in their Translating a Custom Design System to Tailwind CSS.
If you've done CSS in the past in a big project, it's pretty common to work outside of a design system. You can quickly end up with many colors that are meant to achieve the same goal. Maybe you end up with many different spacing in your layout between all your pages. What Tailwind brings is a discipline. You define a single configuration and from that config many values are derived. Unlike inline styles, Tailwind doesn't allow any random values, it only allows you to work within your design system. If you don't define a custom design system then you'll be working with the values that were picked by their in-house designers. A bit more obvious than that, inline styles don't allow for media queries, this means that you can't do a responsive layout with many breakpoints using only inline styles.
Unlike a lot of other CSS frameworks, out of the box Tailwind applies something they call preflight. It disables every single style on every HTML elements. To style something, you add what you need to it. If a button should be rounded with a green background and white text, then those are the classes that the element will have. You don't have the usual specificity issue that you'd run into with other CSS frameworks when you implement your custom designs.
There's a lot more to it, but that's the basic idea.
It is basically inline styling, but with a built-in "design system" paradigm (so you don't throw random px values or hex colors at stuff) and a few defaults. It's nothing you can't do with your CSS pre-processor of choice if you spend a few hours writing mixins and whatnot, but it's easier to just download Tailwind and configure it for your design instead.
https://2021.stateofcss.com/en-US/technologies/css-frameworks/
Looks like Tailwind CSS is doing good this year too with 78% user satisfaction. It also got a surprising usage bump from 26% of respondents to 39% this year.
Covered by Kevin Powell in The state of CSS 2021 results are in!.