No Build Required Tailwind alternative - Twind 🎏
source link: https://dev.to/renhiyama/no-build-required-tailwind-alternative-twind-2ap7
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
What is Twind?
Twind is the smallest, fastest, most feature complete tailwind-in-js solution in existence. Unlike Tailwind (v3) it doesn't build anything, and if you want to, you can bundle twind js file to your client! I mean it just works out of the box 😮
Forget your build step that you have on Tailwind v3!
Get all the benefits of Tailwind without the need for PostCSS, configuration, purging, or autoprefixing. It's just that fast that it can generate css for your whole website in nearly 0.2ms!
No Vendor lock-in from any framework!
Most of the time you use Tailwind with a preconfigured Nextjs app or a similar Framework where everything's setup for you. But since Twind requires little to no configuration as you have on Tailwind, it's the choice a lot of people prefer when they just want to make a site that they don't want to build anything.
😎 One small but low fixed cost
The compiler for Twind v1 costs only 4.5kb which is more than 2x smaller than the previous version of Twind (v0) which costed 13kb! Thanks to Sastan for really making this awesome project 🥰
MIT Licensed
Just thought to let you know it uses one of the most non-restrictive License - MIT License!
For Your Information:
Twind v1 Website is present at https://twind.style
Twind v0 Website is present at https://twind.dev
How to use Twind v1?
Currently there are no docs, because Sastan is pretty busy with his everyday's work and family, but that doesn't stops us from writing this blog that explains how you can use it!
Method 1: Use a supported Twind v1 Framework
Consider Using any of these two frameworks:
- Ree.js: https://github.com/rovelstars/reejs (For Both Node.js & Deno Users)
- Fresh: https://fresh.deno.dev (For Deno Users) Both of these frameworks comes bundled with Twind, and you can opt-out on each of them!
Method 2: Start from Scratch:
For your information, We need to use different packages for different methods of Rendering. For Client Side Rendering, we use @twind/cdn. For Server Side Rendering, we use twind.
and @twind/preset-tailwind because its a small polyfill that tells all the rules of how to generate tailwind classes to Twind. And spoiler alert! It's freaking fast!
We at Ree.js uses both of the modes, and we are gonna share our experience with how to add Twind v1 to your website in the most easy way!
Server Side Rendering
Install the mentioned package:
$ npm i twind@next @twind/preset-tailwind@next
Import them to your server application:
import twind from "twind";
import presetTW from "@twind/preset-tailwind";
twind.setup({
/* config */
presets: [presetTW]
});
//Here app is a server, we are following h3 server specification and not express, but most of the time its just same!
app.get("/", (req, res)=>{
let body = `<div class="min-h-screen bg-indigo-600"><p class="font-bold text-white text-7l">Hello From Twind!</p></div>`;
let css = twind.extract(body).css;
let html = `<html>
<head>
<style>
${css}
</style>
<body>
${body}
</body>
</html>`
return html;
// I remember you probably need to use res.send(html) on expressjs server ;)
});
Please note this is a small example, and you probably need to add some meta tags and other stuff to your html string.
But, looks like we have completed!
Client Side Rendering
<html hidden>
<head>
<script type="module">
let twind = await import("https://esm.run/@twind/cdn@next");
twind.setup();
document.querySelector("html").removeAttribute("hidden");
</script>
<body>
<div class="min-h-screen bg-indigo-600"><p class="font-bold text-white text-7l">Hello From Twind!</p></div>
</body>
</html>
The hidden attribute won't show the page before Twind loads, therefore fixing that "FlashBang!" White Screen 😅
Happy Coding & Have a nice Day!
Thanks for Sastan to help me out with setting Twind v1 myself!
If you like this post, consider a like, unicorn and share it with your friends!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK