Tailwind CSS 在 Vue3 & Vue 2 & Vanilla（html，css，javascript） 中的简单使用方法

Vue 2.x

1. 创建一个VUE项目

2. 安装Tailwind CSS 

　npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3.创建配置文件

　　npx tailwindcss init -p

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

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
-------------------------------------------------------------------------------------------------------------

   module.exports = {

       plugins: {

       tailwindcss: {},

       autoprefixer: {}

    }

 　　两者可以不设置

4. 在main.js 中引入 Tailwind CSS

　　import "tailwindcss/tailwind.css"

5. 配置一下vue.config.js   -------   以前我记得不用  现在不加会报错

// vue.config.js
module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          plugins: [require('tailwindcss'), require('autoprefixer')]
        }
      }
    }
  }

 

Vanilla

 

1.  npm init  --启动

2.  npm install -D tailwindcss postcss-cli autoprefixer   --安装 postcss-cli 、autoprefixer

3.  npx tailwindcss init -p   创建配置文件

4.. 新建css文件夹 style.css  内写

　　@tailwind base； 

　　@tailwind compontents;

　　@tailwind utilities;

5. 将 package.json 里面的 script 

　　新增 　　"watch":"postcss css/style.css -o dist/style.css --watch"

6. dist文件夹下新增 index.html  引入导出的style.css

 

Vue 3

1. npm create vite@latest my-project -- --template vue 创建基础项目

2. npm install -D tailwindcss postcss autoprefixer     这里如果这么安装 应该是tailwind 版本原因 会导致下一步报错 所以我建议 tailwind 安装固定版本@3.4

3.npx tailwindcss init -p  创建配置文件

4. tailwind.config.js 中

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. style.css 中

@tailwind base;
@tailwind components;
@tailwind utilities;

可能会遇到警告

此时只需要在 VScode 的 setting 中 添加

"files.associations": {
        "*.css": "tailwindcss"
}

即可

这样 项目中的 Tailwind CSS 代码就可以正常使用了~