在 Vue 3 和 Vite 安装 Tailwind CSS

在 Vue 3 和 Vite 安装 Tailwind CSS

在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档

安装 Tailwind 以及其它依赖项:

目前最新的tailwindcss 3.0.24，我们这里用2.2.19,因为有些配置改了

npm install -D [email protected] postcss@latest autoprefixer@latest

接下来，生成您的 tailwind.config.js 和 postcss.config.js 文件：

npx tailwindcss init -p

postcss.config.js

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

tailwind.config.js

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

在您的 CSS 中引入 Tailwind,创建 tailwind.css 文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。

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

再main.js中引入该文件

webstorm 安装Tailwind CSS后才会有提示

测试：

APP.vue

<template>
<div class="h-screen bg-red-400">
1111
div>
template>

<script setup>

script>

<style>

style>