vite 不构建顺风 css

Question

我使用npm install -D tailwindcss postcss autoprefixer vite安装了tailwind和其他工具

我使用 npx tailwindcss init -p 创建了 tailwind 和 postcss 配置文件

tailwind.config.js 包含：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js 包含：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

我的 CSS 文件存在于 css\tailwind.css 中并包含：

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS 文件使用 <link href="/css/tailwind.css" rel="stylesheet" > 链接到我的 HTMl 页面

当我运行 vite 时，我的应用程序启动时没有构建错误，但没有生成顺风输出。

Answer 1

你需要调整一些设置，感觉你已经很接近了。

1. 编辑 Tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

1. 使用“npm run dev”命令启动 Vite 构建脚本。

// Open terminal
npm run dev

1. （可选）将演示 h1 属性复制到您的索引文件中并进行测试

<h1 class="text-3xl text-blue-700">Testing</h1>