在 vite 项目中添加 tailwind4

如何在 vite 项目添加 tailwindcss4

01 创建vite项目

使用 vite 创建一个项目

yarn create vite . --template react-ts

02 安装 tailwind css

安装 tailwind 配置必须的依赖

yarn add --dev tailwindcss @tailwindcss/vite

03 配置 vite.config.ts

配置的核心代码

import: import tailwindcss from '@tailwindcss/vite'
添加 plugins: tailwindcss()

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

04 入口css配置

配置 tailwind 入口

@import "tailwindcss";

05 添加 jsw-presets

安装依赖

yarn add --dev @jswork/presets-tailwind

这个是自己的扩展 index.css

@import "tailwindcss";

@config "./tailwind.config.js";

配置如下 tailwind.config.js

import jswPresets from '@jswork/presets-tailwind';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [jswPresets()],
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
};

06 简单的测试页面

测试 hello tailwindcss4

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline debug">
    Hello world!
  </h1>
</body>
</html>

07 注意

经过测试，兼容性存在问题

目前 tailwind4 在 ios13 等低端环境下，会无法渲染，所以，一般 productoin 环境，暂时不宜使用
tailwind3 基本使用正常

index.css 不要换成 index.scss 会有问题

问题出在样式入口用了 Sass (src/assets/style.scss)，Tailwind 4 目前不再支持在 Sass/LESS/Stylus 等预处理器里直接注入指令。
style.scss 里的 @use "tailwindcss"; 与 @config "./tailwind.config.js"; 
会先被 Sass 处理，导致 Tailwind 在第二阶段接收到的 CSS 无法正确展开 @tailwind utilities 等指令，所以最终生成的 CSS 里根

本没有诸如 .text-base、.font-bold 这类工具类。

构建产物里还能看到残留的 @tailwind utilities; 就是佐证style.scss 未被 Tailwind 处理完成。

vite tailwind react tailwindcss scss