在VUE中使用Tailwind CSS

語言: CN / TW / HK

theme: channing-cyan

一起養成寫作習慣!這是我參與「掘金日新計劃 · 4 月更文挑戰」的第6天,點選檢視活動詳情

嗨!大家好!我是手可摘棉花,一名前端開發,很開心在這裡分享文章,期待著大家的點贊👍與關注➕。

1.介紹

Tailwind CSS是一個非常酷的前端框架,它可以讓你跟快速輕鬆的構建的UI元件。如果你還沒聽過Tailwind CSS,引用官方的話術說的是“ 一個實用程式優先的 CSS 框架 ”,它定義許多非常小的類,用於提供構建你的頁面及元件,你會有一種“挖偶”的一聲,原來css也可以跟html一樣寫。

2.安裝

在vue的根目錄下,安裝 Tailwind 及其依賴項(PostCSS & auto-prefixer)。有可能安裝的時候回提示錯誤導致安裝不成功,一般都是缺少其他依賴或版本問題,根據提示說明解決就好,正常都是一次性通過。

bash npm install -D tailwindcss postcss autoprefixer

生成Tailwind CSS配置檔案

bash npx tailwindcss init -p

在配置檔案content中新增所有模板檔案的路徑

js //tailwind.config.js module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

建立一個tailwindcss.css樣式檔案,用於初始化並引入tailwindcss的基礎樣式

css /* /src/css/tailwindcss.css*/ @tailwind base; @tailwind components; @tailwind utilities;

匯入css/tailwindcss.cssmain.js,這樣就讓你的專案擁有了Tailwind CSS

```js // src/main.js import { createApp } from 'vue' import App from './App.vue' import "./css/tailwindcss.css"

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

3.嘗試Tailwind CSS

簡單寫了一個首頁頂部導航選單效果,在不寫任何css的情況下,用html結合Tailwind CSS的樣式類進行,程式碼看起來定義的內容有點多,但可以讓我們儘可能的少些一些css

```vue ```

效果圖:

1.png

4.總結

在你成功安裝Tailwind CSS後,你將擁有了所有官方定義的css類,進行頁面的構建,從某種程度上,減少了你重複寫css的程式碼。雖然在一開始的情況下可能有感覺到無從入手,因為Tailwind CSS提供的標籤太多了,寫頁面功能需要些大量的html,所有當你足夠熟悉Tailwind CSS的時候,你會慢慢的發現它的優點,並且可以快速的進行開發頁面,而只需儘可能的少些css的程式碼。