Twind项目安装与使用指南：运行时Tailwind CSS解决方案

丁操余

于 2025-06-10 09:17:30 发布

阅读量244

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00759/article/details/148552120

Twind项目安装与使用指南：运行时Tailwind CSS解决方案

twind The smallest, fastest, most feature complete Tailwind-in-JS solution in existence. 项目地址: https://gitcode.com/gh_mirrors/tw/twind

什么是Twind

Twind是一个创新的CSS解决方案，它能够在运行时将实用类(utility classes)转换为CSS样式。这个项目的独特之处在于，它完美结合了CSS-in-JS的灵活性和Tailwind CSS精心设计的API约束，同时不需要任何构建步骤。

核心优势

零构建步骤：直接在浏览器或Node.js等环境中运行
轻量高效：相比传统Tailwind CSS实现更小的体积
即时样式：运行时动态生成CSS，开发体验流畅
Tailwind兼容：熟悉Tailwind CSS的开发者可以快速上手

本地/打包环境安装

1. 安装核心包

首先需要安装Twind的核心包：

npm install @twind/core

2. 创建配置文件

建议创建一个单独的配置文件twind.config.js，这样可以让一些工具(如IntelliSense)更容易找到你的配置：

// twind.config.js
import { defineConfig } from '@twind/core'

export default defineConfig({
  /* 配置选项 */
})

3. 初始化Twind

在你的应用入口文件中初始化Twind：

// index.js
import { install } from '@twind/core'
import config from './twind.config'

// 启用twind - 至少需要调用一次
install(config)

4. 推荐预设安装（可选）

虽然Twind核心包不包含任何预设规则，但强烈推荐安装以下两个官方预设：

npm install @twind/preset-autoprefix @twind/preset-tailwind

然后在配置文件中启用它们：

// twind.config.js
import { defineConfig } from '@twind/core'
import presetAutoprefix from '@twind/preset-autoprefix'
import presetTailwind from '@twind/preset-tailwind'

export default defineConfig({
  presets: [presetAutoprefix(), presetTailwind()],
})

5. 开始使用

现在你可以在HTML中使用Tailwind风格的类名了：

<h1 class="text-3xl font-bold underline">Hello world!</h1>

6. 防止FOUC（可选）

如果你没有使用服务器端静态提取样式，可以添加以下代码防止"未样式内容闪现"(FOUC)：

<body class="!block" style="display: none">
  <!-- 你的内容 -->
</body>

浏览器直接使用

Twind也可以直接在浏览器中使用，无需任何构建步骤。

1. 添加脚本

在HTML的<head>中添加Twind脚本：

<head>
  <script src="https://cdn.jsdelivr.net/npm/@twind/core@1" crossorigin></script>
</head>

2. 初始化配置

在同一个<head>中添加初始化代码：

<script>
  twind.install({
    /* 配置选项 */
  })
</script>

3. 添加预设（可选）

如果需要使用预设，可以这样加载：

<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(), twind.presetTailwind()],
    })
  </script>
</head>

Twind CDN使用

Twind提供了一个专门的CDN版本，它是Tailwind CSS Play CDN的替代方案，体积更小(17kB vs 104kB)，且包含了常用预设。

1. 基础使用

<head>
  <script src="https://cdn.twind.style" crossorigin></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>

2. 扩展预设（可选）

Twind CDN已经包含了常用预设，但也可以添加额外预设：

<head>
  <script src="https://cdn.twind.style/ext,line-clamp,forms,typography" crossorigin></script>
  <script>
    twind.install({
      presets: [
        twind.presetExt(),
        twind.presetLineClamp(),
        twind.presetTailwindForms(),
        twind.presetTypography()
      ],
    })
  </script>
</head>