当前位置：首页 > news >正文

vue3+ts 安装tailwindcss样式库

news 来源：原创 2025/5/25 8:41:24

中文官网：安装 - TailwindCSS中文文档 | TailwindCSS中文网

安装 Tailwind CSS

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

npm install -D tailwindcss
npx tailwindcss init

若运行npx tailwindcss init报错如下：npx tailwindcss init报错-CSDN博客

配置模板文件的路径

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
module.exports = {content: ['index.html', 'src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {spacing: {3.75: '15px'},colors: {primary: '#165DFF',danger: '#f56c6c',wx: '#3975C6',fff: '#fff'}}},plugins: []
}

将加载 Tailwind 的指令添加到你的 CSS 文件中

在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

在src/assets文件夹下新建styles.css

在styles.css复制一下代码

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

开启 Tailwind CLI 构建流程

运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

npx tailwindcss -i ./src/assets/styles.css -o ./dist/output.css --watch

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from 'tailwindcss'
// https://vite.dev/config/
export default defineConfig({base: './',plugins: [vue()],css: {postcss: {plugins: [tailwindcss],},},
})

main.ts引入

import './assets/styles.css'

测试代码：

<template><div><div class="min-h-screen bg-gray-50 flex items-center justify-center p-6"><div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg"><h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">Vue 3 + Tailwind CSS 示例</h1><!-- 输入框和按钮 --><div class="mb-4"><label for="name" class="block text-sm font-medium text-gray-700">用户名</label><input type="text" id="name" placeholder="请输入用户名"class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><buttonclass="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200">提交</button><!-- 显示用户名 --><p class="mt-4 text-center text-gray-600">欢迎{{ userName }}</p></div></div></div>
</template>

成功运行！！！