vite+vue3使用tailwindcss

记录一下在vue3中使用tailwindcss的过程，以及解决tailwind在模板中没有语法提示。

1.安装tailwindcss

安装 Tailwind 以及其它依赖项:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2.创建tailwindcss的配置文件

npx tailwindcss init

这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {}
  },
  plugins: []
}

3.在入口中引入tailwind

// main.ts
import "tailwindcss/tailwind.css"

4.配置tailwind.config.js文件

content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']

在 tailwind.config.js 文件中，配置 content 选项指定所有的 pages 和 components ，使得 Tailwind 可以在生产构建中，对未使用的样式进行tree-shaking。

5.配置vite.config选项

    css: {
      postcss: {
        plugins: [tailwindcss, autoprefixer]
      }
    }

使用postcss的tailwindcss和autoprefixer插件对，css进行处理

6.配置vscode

其实配置到这里我已经完成对tailwind的安装，但在模板中仍没有智能的提示，此时需要去settings.json中，在末尾添加以下代码段：

  "editor.quickSuggestions": {
    "strings": true
  }

至此，所有的设置已经完成，可以愉快的使用tailwind了