vite+React+Tailwindcss环境安装

theme: devui-blue

TailwindCSS是什么？

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4,
 text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
 使用 TailwindCss 你不用花精力来定义类名，你可以使用内置具有良好语义化的类名，实现样式效果。你也可以一定程度定义符合你自己规则的类名，例如加上统一的前缀

Tailwindcss中文文档中提供了react框架安装的教程,详情请看下方
在 Create React App 中安装 Tailwind CSS – Tailwind CSS 中文文档
但我根据官网教程并不能成功安装，在实验多次后，终于找到一个成功安装的方法了！！！

安装步骤

1. 初始化一个react项目 ->

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 在根目录下创建postcss.config.js文件

// postcss.config.js
export const plugins = {
    tailwindcss: {},
    autoprefixer: {},
};

3. 在项目中初始化 tailwind

npx tailwindcss init

会生成tailwind.config.js文件或是tailwind.config.cjs文件

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
     colors:{
        //自定义颜色
        "welcome-btn":"#0052FF"
      }
    },
  },
  plugins: [],
}

4. 在根目录下创建一个styles.css文件

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

然后修改package.json 文件中

"scripts": {
    "tailwind": "tailwindcss build src/styles.css -o public/styles.css"
  },

在项目目录中创建public文件，执行以下命令

npm run tailwind

即完成建构，public文件夹中多了一个styles.css文件，在main.jsx中引入

5. 测试一下 App.jsx

import { useState } from 'react'

function App() {

  return (
    <button className="bg-red hover:bg-blue-700 text-3xl text-red-500">
    Hover me
</button>
  )
}

export default App

结果如下：

ps:如果还不成功的话，可以再多装几次 tailwindcss，亲测有效！

npm i tailwindcss