Re:Tailwind: style your site without writing any CSS
by Raphmedia on Friday November 02, 2018 @12:54PM
(#18364604)
This way is great, it's not the one I use but I have no issue with it.
I prefer to use SASS variables along with a strict build system that refused to build if the developer isn't using variables that are injected via a config YAML file. In the end, we are both working in a similar way.
That being said, ".u-colorPrimary" is great. You can easily refactor it and it should scale well. However, ".bg-orange" and ".text-white" aren't great.
This button from the article is really bad:
<a class="text-xl rounded bg-orange pt-1 pb-1 pr-4 pl-4 text-white hover:text-white no-underline leading-loose" href="#">
The point of a broad set of utility classes is to have predefined and discrete classes that map to conventions your application uses. Here's a few examples from an app I use:
.u-colorPrimary { font-color: var(--utils-css-c-primary) !important;; }
.u-textSmall { font-size: 0.75rem; }
Each of these are a "standard" that we use throughout the app. There are NO one-offs. These can then be composed into "component" classes (e.g. .Button, or .TextInput).
The benefit is mostly threefold:
* Maintainability is great. No hunting throughout the templates when you want to change the primary colour. Just update the .u-colorPrimary class, or its underlying variable. * Our developers can look at a design and mostly do it themselves. No need for a CSS pro to come in. * We can package these into a node module and share them across our apps.
You're right: this is laziness. I don't like to repeat myself, and I like consistency.