Vite 安装 Tailwind CSS入坑笔记

参考文档
https://www.tailwindcss.cn/docs/installation
https://tailwindcss.com/docs/guides/vite#vue

npm create vite@latest
cnpm i
tailwindcss 
framework   use vue 
npm install -D tailwindcss postcss autoprefixer

执行下面命令自动创建配置文件

npx tailwindcss init -p

tailwind.config.js

需要修改content部分，

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

  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

src/style.css添加

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

如果是自己定义的项目，确保入口 main.ts 使用了import './style.css'
npm install

vscode提示安装 tailwind css intellisense
然后测试使用
如果字体颜色发生变化则代表成功。

<template>
    <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
        <!-- 左  -->
        <div>
<div class="text-red-600 text-3xl">hellow world</div>

        </div>
        <!-- 中  -->
        <div></div>
        <!-- 右 -->
        <div></div>
    </div>
</template>