Tailwind CSS 在vue里 的使用
在Vue项目中使用Tailwind CSS，你需要按照以下步骤操作：
- 安装Tailwind CSS npm包：
npm install -D tailwindcss postcss autoprefixer
- 使用Tailwind CSS CLI工具创建配置文件：
npx tailwindcss init -p
3.在tailwind.config.js中配置purge选项，以最优化构建大小：
// tailwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
4.在postcss.config.js中添加Tailwind CSS插件：
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
- 在Vue组件中引入Tailwind CSS：
<template>
<div class="text-blue-700">Hello Tailwind!</div>
</template>
<script>
export default {
// ...
};
</script>
<style>
/* 在这里也可以使用Tailwind CSS */
</style>
6.在Vue单文件组件（SFC）的<style>标签中使用Tailwind CSS类：
<template>
<div class="bg-gray-200 p-10">Hello Tailwind!</div>
</template>
<script>
export default {
// ...
};
</script>
<style>
/* 在这里使用@tailwind指令来引入Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
7.在Vue项目的入口文件（通常是main.js或main.ts）中引入Tailwind CSS：
import Vue from 'vue';
import App from './App.vue';
// 引入Tailwind CSS
import './assets/tailwind.css';
new Vue({
render: h => h(App),
}).$mount('#app');
确保你的Vue项目已经安装了Tailwind CSS，并且正确配置了webpack或其他构建工具以处理Tailwind CSS。这样你就可以在Vue项目中使用Tailwind CSS了。