DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’»

DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for No Build Required Tailwind alternative - Twind šŸŽ
Ren Hiyama
Ren Hiyama

Posted on

No Build Required Tailwind alternative - Twind šŸŽ

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:

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
Enter fullscreen mode Exit fullscreen mode

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 ;)
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
blanklob profile image
Blanklob

šŸš€šŸš€šŸ’š

One of the best series of the year

How web browsers work (with illustrations)

Seven part series ā€” highly bookmarkable šŸ˜…