Earlier quoted context omitted.
This is ridiculous. Tailwind css is a utility "framework", which generates configured css classes to set 1-2 css attributes each. The only reason it adds a build step is that it wants to tree-shake all unused classes to keep your bundle size as small as possible and let you configure which classes are available for generation. Even the documentation makes it extremely clear which properties are set by which class (th…
You're completely right, and it's annoying to see this downvoted. Having read a lot of frontend discussions on HN, I would wager that half the people talking about how "complex" frontend is don't work in it. Tailwind and regular CSS are hardly distinct, it's just slightly different names. It's very odd to see HN, supposedly a "self-thinker" crowd, continuously spout incorrect things because they heard someone else sa…
Tailwind:
div {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
The above example shows how convenient Tailwind can be... well if you happen to want that 10px 15px -3px, 4px 6px -4px shadow, but the moment you break out of their palette or default style setup you end up doing stuff like this:
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a'
}
}
}
}
:root {
--regal-blue: #243c5a;
}
div {
background-color: var(--regal-blue);
}