Vite Tailwind

Vite Tailwind 安裝

建立專案

一安裝 Tailwind

1
npm install -D tailwindcss postcss autoprefixer

二建立的是 tailwind 的設定檔

1
npx tailwindcss init -p

建立完成後會發現專案根目錄多出了 tailwind.config,jspostcss.config.js這兩個檔案。

1
2
3
4
5
6
7
8
9
10
11
12
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

將 Tailwind 指令加入您的 CSS 中

在src資料夾內新增style.css

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

安裝了 autoprefixer以後style 會自動產生
從main.ts引入style.css（Vite Vue 專案）

1
2
3
4
5
6
7
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'   //引入 tailwindcss  

const app = createApp(App);

app.mount("#app");

從entry-client.ts引入style.css

在App.vue測試

1
2
3
4
5
6
7
8
9
10
   <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  <div class="p-6 max-w-sm mx-auto rounded-xl shadow-lg flex items-center space-x-4 bg-slate-900 p-8 pt-7">

  <div>
    <div class="text-xl font-medium text-white">ChitChat</div>
    <p class="text-white">You have a new message!</p>
  </div>
</div>

參考官網

使用 Vite 安裝 Tailwind CSS