Document integrations with Tailwind and Material
Twind is another way to integrate Tailwind, which might make sense in some situations.
Twind describes itself as The smallest, fastest, most feature complete tailwind-in-js solution in existence – basically, it's a Tailwind compiler that is embedded as a JavaScript script (so no Node.js required!).
For example, here is how to use Twind via CDN:
<head>
<script src="https://cdn.twind.style" crossorigin></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
See https://twind.style/installation for more ways to set up Twind, and https://twind.style/ for general information.
(I'm not affiliated with the project, just a satisfied user)
I've added the Tailwind integration using the main Tailwind CLI people are used to... Good to know about Twind but it seems like it requires much less setup so should be easy enough for people to figure out as needed.
@gbj: Alright. I've actually mentioned Twind because the setup is easier (compared to Tailwind / if the tradeoffs are acceptable), and because Twind is more or less unknown, compared to Tailwind.
I've had reasonably good experiences with twind, other than some slight issues related to the migration to v1 and the fact that it does need a bit of javascript setup.
Another option for tailwind users looking for a pure CSS option with fewer setup issues than provides similar benefits to tailwind would be a css-variables-only library like pollen, whose only purpose is to provide the palette with pre-chosen values, but without the part of tailwind that aims to be a less verbose version of inline CSS, and with a small enough footprint to be installed on its own.
If the intent is instead to have customizability while being less verbose than inline CSS, bonsai has some nice utilities that offer a very concise way to modify elements, and which compose much better with both CSS variables and with signal-based fine grained updates than class-based utilities like tailwind. The library is intended to be used for classless styling but the utilities are available in a standalone package, just reading it taught me a really interesting trick about how you can make shorthands for css inline styles.