Vue3+Vite项目中使用tailwindcss-安装配置

最新推荐文章于 2025-07-01 09:07:52 发布

原创最新推荐文章于 2025-07-01 09:07:52 发布 · 736 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #tailwind

Vue 同时被 2 个专栏收录

376 篇文章

订阅专栏

HTML

187 篇文章

订阅专栏

Tailwind CSS

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。

他快速、灵活、可靠，没有运行时负担。

安装

步骤

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

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

tailwind.css

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

main.ts

import '@/assets/styles/tailwind.css';

注意

通过上面的步骤就已经可以使用了
<h1 class="text-3xl font-bold underline">Hello world!</h1>

TS版本

当你的项目是ts版本的时候，需要进行修改，应为默认是js文件

1、安装 TypeScript 和类型定义：确保你已经安装了 TypeScript 和 Tailwind CSS 的类型定义

npm install -D typescript @types/node

2、重命名文件：将 tailwind.config.js 重命名为 tailwind.config.ts。
3、更新配置文件：修改配置文件以使用 TypeScript 语法，同时导入合适的类型定义。

import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

更新脚本（如有必要）：确保在构建工具（如 Vite 或 Webpack）的配置中正确处理 TypeScript 文件。

关注博主即可阅读全文