TailwindCSS

中文文档

安装

npm install -D tailwindcss@3 postcss autoprefixer

配置

tailwind.config.js

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

postcss.config.js

import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'

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

assets/css/tailwind.css

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

/* 自定义全局样式示例 */
body {
  @apply bg-gray-50 text-gray-800;
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/css/tailwind.css' // 引入 TailwindCSS

createApp(App).mount('#app')

使用

<template>
  <div class="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md space-y-4">
    <h1 class="text-2xl font-bold text-center text-indigo-600">
      Hello Tailwind v3 👋
    </h1>
    <button class="px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600">
      点击我
    </button>
  </div>
</template>