创建TailwindCSS环境

npm环境安装
创建Tailwind CSS环境

npm init -y  配置Node环境
npm install tailwindcss postcss-cli autoprefixer安装插件配置       
npx tailwind init     配置tailwind环境

新建一个postcss.config.js
内容如下：

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

创建一个目录名为public在里面创建文件名为tailwind.css
文件中输入以下内容

@tailwind base;
@tailwind components;
@tailwind utilities;
.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

进入package.json文件修改代码

"scripts": {
    "build": "postcss public/tailwind.css -o css/tailwind.css"
 },

npm run build 创建
根据public/tailwind.css文件 编译自动创建css/tailwind.css，使用时引入它。

自动重新生成Tailwind CSS

这样每次都要执行npm run build编译
进入package.json文件修改代码

"scripts": {
"build": "postcss public/tailwind.css -o css/tailwind.css",
    "watch": "postcss build public/tailwind.css -o css/tailwind.css --watch"
 },

这时候只要运行npm run watch就可以自动监听你的页面改动。
ctrl + c 取消监听模式

优化Tailwind CSS文件大小

这时候需要配置一下tailwind.config.js:

// tailwind.config.js
  module.exports = {
   purge: [
     './*.html',
   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

检查路径下的这些文件，然后自动删除这些文件没用到的css（./是开头 *代表全部）

因为这条命令需要用到cross-env,所以安装一下：

npm i cross-env --save-dev

进入package.json文件修改代码

"scripts": {
"build": "postcss public/tailwind.css -o css/tailwind.css",
"watch": "postcss build public/tailwind.css -o css/tailwind.css --watch",
"build:css": "cross-env NODE_ENV=production postcss public/tailwind.css -o css /tailwind.css"
 },

创建语句变成了npm run build:css
监听还是 npm run watch

vue创建Tailwind环境

安装指定版本的插件

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

生成 tailwind.config.js 和 postcss.config.js 文件

npx tailwindcss init -p

tailwind.config.js

module.exports = {
  purge: [],
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
}

创建 ./src/index.css

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

导入到您的 ./src/main.js 文件中

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Tailwindcss官网：

参考文章：
如何开始使用Tailwind CSS新建一个项目
如何使用npm安装并简单使用Tailwindcss

Tailwindcss插件库：
tailwindcomponents
Tailwind Toolbox
TailBlocks
daisyUI
HyperUI