Vue如何配置TailwindCSS
lijiacheng 2024-03-20 css3
# Tailwindcss
# 官网 https://www.tailwindcss.cn/
# 第一步：下载vue
vue create tailwindcssVue
# 第二步创建项目之后，进行插件下载
通过 npm 安装 tailwindcss。
npm install -D tailwindcss postcss autoprefixer
# 第三步 tailwindcss初始化，会生成两个文件 tailwind.config.js 和postcss.config.js
npx tailwindcss init -p
# 第四步在 tailwind.config.js 配置文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
# 第五步将加载 Tailwind 的指令添加到你的 CSS 文件中
可以在src下的style.css中或者自己自定义一个accset下新建css文件也可以(不过记得要在main.js中进行引入)，这个文件是之后可以进行配置覆盖css的或者自己制定一套也是可以的
@tailwind base;
@tailwind components;
@tailwind utilities;
# 第六步在main.js中引入tailwind.css(引入第五步写的代码)
import Vue from 'vue'
import App from './App.vue'
import "./style.css" //引入tailwindcss
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
# 第七步在页面中测试
<template>
<div id="app">
<div
class="w-screen h-screen bg-black border-slate-600 font-bold text-8xl text-stone-50 text-center"
>
TailWind Css
</div>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>