React和Vite环境下TailwindCSS的配置详解
更新时间：2026年06月30日 10:41:24 作者：西门飘雪01
本文详细介绍了如何在Vite项目中集成Tail尾windCSS,包括生成配置文件、配置`tailwind.config.js`、`vite.config.js`,以及在`src/index.css`中引入样式,助您快速搭建优雅的CSS框架
1. 安装tailwindcss
npm install -D tailwindcss postcss autoprefixer
2. 生成tailwindcss 配置文件
npx tailwind init -p
3. tailwind.config.js 配置
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}4. vite.config.js 配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "tailwindcss"
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
// 新增 css 配置
css: {
postcss: {
plugins: [tailwindcss()],
}
}
})5. 引入 tailwind
在 src/index.css 中加入如下配置：
@tailwind base; @tailwind components; @tailwind utilities;
6. 查看是否配置成功
function App() {
return (
<main className="bg-green-500 text-slate-300 text-center w-[100px] h-[100px]">
Hello World
</main>
)
}
export default App
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue.js实现用户评论、登录、注册、及修改信息功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
下面小编就为大家带来一篇vue 实现 tomato timer(蕃茄钟)实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)
突然接到公司需求,说客户想让我们把项目直接打包,所以下面这篇文章主要给大家介绍了关于Vue项目打包成exe可执行文件的实现过程,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
今天小编就为大家分享一篇Vue2 监听属性改变watch的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue2中无法监听数组和对象的某些变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue+iview如何实现拼音、首字母、汉字模糊搜索，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
当我们遇到定位展示的时候会出现使用地图展示的需求,下面这篇文章主要给大家介绍了关于前端项目中如何使用百度地图api(含实例)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
在Vue.js中,您可以使用watch选项来创建侦听器,以侦听特定属性的变化,侦听器可以在属性发生变化时执行相关的逻辑,本文给大家详细讲讲Vue中watch侦听器的用法,需要的朋友可以参考下2023-11-11
今天我们来学习一下watch侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用，希望对大家有所帮助2022-07-07
Vue3中使用defineCustomElement 定义组件详解
这篇文章主要为大家介绍了Vue3中使用defineCustomElement 定义组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论