vue3使用tailwindcss

Tailwind CSS 是一个现代且高度可定制的CSS框架，它以“原子化”设计理念为核心，通过提供一系列可重复使用的CSS类，帮助开发人员更快速地构建美观且响应式的用户界面

1 使用脚手架创建好相关的vue3模板

2安装 Tailwind CSS

通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。

npm install -D tailwindcss postcss autoprefixer

初始化两个文件

npx tailwindcss init

3将tailwindcss添加到你的postcss.config.js中

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

4将路径添加到你的模板中，在tailwind.config.js中添加

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

5.将 Tailwind 指令添加到您的 CSS 中

将 Tailwind 的每个层的指令添加到您的主 CSS 文件中。@tailwind

在main.css中添加

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

6.开始构建过程

使用文件中配置的任何命令运行构建过程。npm run devpackage.json

npm run dev

最后使用就行了