Getting Started
Installation
Twind is a small compiler that converts utility classes into CSS at runtime. The goal of this project is to unify the flexibility of CSS-in-JS with the carefully considered constraints of the Tailwind CSS API.
Utility-first CSS without any build step right in the browser or any other environment like Node.js, deno, workers, ...
If you have used Tailwind CSS or other CSS-in-JS solutions, then most of the API should feel very familiar.
The @twind/core
package does not include any rules or variants. You need to install an existing preset or bring your own preset to get started.
Local / Bundler
Twind provides several integrations for different frameworks and environments.
-
Install twind
Twind is available on npm.
shnpm install @twind/core
-
Define the configuration
Using an extra file,
twind.config.js
, allows some tools like IntelliSense to find your configuration.twind.config.js jsimport { defineConfig } from '@twind/core' export default defineConfig({ /* options */ })
-
Load Twind in your application entry point.
install
creates and registers a twind instance that will generate the styles. This allows third-party packages to importtw
from the twind package and get the same instance.index.js jsimport { install } from '@twind/core' import config from './twind.config' // activate twind - must be called at least once install(config)
-
Optional: Install and configure the recommended presets
@twind/preset-autoprefix
and@twind/preset-tailwind
.Install the presets
shnpm install @twind/preset-autoprefix @twind/preset-tailwind
Configure the presets
Each preset must be added to the
presets
array in the configuration.twind.config.js jsimport { defineConfig } from '@twind/core' import presetAutoprefix from '@twind/preset-autoprefix' import presetTailwind from '@twind/preset-tailwind' export default defineConfig({ presets: [presetAutoprefix(), presetTailwind()], })
-
Start using Twind in your HTML
Start using Twind classes to style your content.
html<h1 class="text-3xl font-bold underline">Hello world!</h1>
-
Optional: Prevent FOUC
Incase you are not using static extraction to include the generated styles on the server apply the following pattern to prevent FOUC:
html<body class="!block" style="display: none"> <!-- ... --> </body>
If any element has the
autofocus
attribute, Twind will focus it after all styles are injected.
TODO: Whats next? List and links of framework integrations. All official integrations are available on npm with the prefix @twind/with-
.
Browser Usage
Twind is available as a global browser script and can be used directly in the browser.
We recommend to use Twind CDN if you want to use Tailwind utilities.
-
Add the Twind script to your HTML
Add the script tag to the
<head>
of your HTML file.html<head> <script src="https://cdn.jsdelivr.net/npm/@twind/core@1" crossorigin></script> </head>
-
Create the environment
install
creates a twind instance that will observeclass
attributes and generate the corresponding styles.html<head> <script src="https://cdn.jsdelivr.net/npm/@twind/core@1" crossorigin></script> <script> twind.install({ /* options */ }) </script> </head>
-
Optional: Install and configure the recommended presets
@twind/preset-autoprefix
and@twind/preset-tailwind
.Add the presets script to your HTML
html<head> <script src="https://cdn.jsdelivr.net/combine/npm/@twind/core@1,npm/@twind/preset-autoprefix@1,npm/@twind/preset-tailwind@1" crossorigin ></script> </head>
Configure the presets
Each preset must be added to the
presets
array in the configuration.html<head> <script src="https://cdn.jsdelivr.net/combine/npm/@twind/core@1,npm/@twind/preset-autoprefix@1,npm/@twind/preset-tailwind@1" crossorigin ></script> <script> twind.install({ presets: [twind.presetAutoprefix(/* options */), twind.presetTailwind(/* options */)], }) </script> </head>
-
Start using Twind in your HTML
Start using Twind classes to style your content.
html<body> <h1 class="text-3xl font-bold underline">Hello world!</h1> </body>
Twind CDN
Twind CDN is a drop-in replacement for Tailwind CSS Play CDN that is 6 times smaller (104kb vs 17kB) without any build step right in the browser.
> @twind/preset-autoprefix and @twind/preset-tailwind are included out-of-the-box.
-
Add the Twind CDN script to your HTML
Add the script tag to the
<head>
of your HTML file.html<head> <script src="https://cdn.twind.style" crossorigin></script> </head>
-
Optional: Add additional presets —
@twind/preset-autoprefix
and@twind/preset-tailwind
are already included in Twind CDN.To use other presets add their ids to the script
src
attribute:Add the preset to Twind CDN script in your HTML
html<head> <script src="https://cdn.twind.style/ext,line-clamp,forms,typography" crossorigin></script> </head>
Configure the presets
Each preset must be added to the
presets
array in the configuration.html<head> <script src="https://cdn.twind.style/ext,line-clamp,forms,typography" crossorigin></script> <script> twind.install({ presets: [ twind.presetExt(/* options */) twind.presetLineClamp(/* options */) twind.presetTailwindForms(/* options */) twind.presetTypography(/* options */) ], }) </script> </head>
-
Start using Twind in your HTML
Start using Twind classes to style your content.
html<body> <h1 class="text-3xl font-bold underline">Hello world!</h1> </body>
What to read next
Get familiar with some of the core concepts that make Twind different from writing traditional CSS.
Integrations
How to use Twind in different frameworks and environments.
Migration
We have collected a list of changes in Migration › Twind v0.16. A detailed migration guide will follow.