tailwindcss在vue中的使用教程

可以通过以下步骤在Vue中使用tailwindcss:

1. 打开terminal，输入以下命令安装tailwindcss和postcss:

npm install tailwindcss postcss-cli postcss --save-dev

2. 在项目根目录下创建一个postcss.config.js文件，添加以下代码:

module.exports = {
  plugins: [
    require('tailwindcss')
  ]
}

3. 打开项目根目录下的App.vue文件，添加以下代码到style标签中，以引入tailwindcss:

<style>
/* 这里需要加 !importants ，是因为vue-cli默认会引入scoped，导致 tailwind 样式无法生效，可能造成一定的坑,除非很熟悉vue 的 scoped 问题 */
@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";
</style>

4. 在项目根目录下创建tailwind.config.js文件，并添加以下代码，以配置tailwindcss的选项:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

5. 运行以下命令来编译css文件:

npx tailwindcss-cli build -o ./src/assets/css/tailwind.css

6. 在main.js中引入CSS文件，如下:

import './assets/css/tailwind.css'

这样，你就可以开始使用tailwindcss来定义你的样式了。希望以上内容可以帮助到你。