在 vite 项目中添加 tailwindcss4

如何在 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>

vite tailwind react tailwindcss