vite+React+Tailwindcss环境安装
TailwindCSS是什么?
Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如
flex
,pt-4
,text-center
和rotate-90
这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。 使用TailwindCss
你不用花精力来定义类名,你可以使用内置具有良好语义化的类名,实现样式效果。你也可以一定程度定义符合你自己规则的类名,例如加上统一的前缀
Tailwindcss中文文档中提供了react框架安装的教程,详情请看下方 在 Create React App 中安装 Tailwind CSS - Tailwind CSS 中文文档 但我根据官网教程并不能成功安装,在实验多次后,终于找到一个成功安装的方法了!!!
安装步骤
- 初始化一个react项目 ->
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
- 在根目录下创建postcss.config.js文件
// postcss.config.js
export const plugins = {
tailwindcss: {},
autoprefixer: {},
};
- 在项目中初始化 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: [],
}
- 在根目录下创建一个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中引入
- 测试一下 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
转载自:https://juejin.cn/post/7166987641446268958