在Vue.js中使用Tailwind

本文介紹了如何在Vue CLI 3項目中設置Tailwind的使用方法。

Tailwind 是一個相當酷炫的CSS框架。

在本文中，我將向您展示如何在Vue應用程序中使用Tailwind（v1.0.5）。

這裡有4個簡單的步驟：

• 安裝Tailwind
• 創建配置文件
• 配置PostCSS
• 創建CSS文件
• 在您的Vue應用程序中導入該文件
• 測試是否正常工作

本文假設您想要將Tailwind應用於基於Vue CLI 3的項目。

安裝Tailwind

第一步是使用npm或yarn安裝Tailwind：

npm install tailwindcss --save-dev


yarn add tailwindcss --dev

創建配置文件

接下來，使用提供的Tailwind命令創建一個配置文件。

./node_modules/.bin/tailwind init tailwind.js

這將在項目的根目錄中創建一個tailwind.js文件，添加基本的Tailwind配置。該文件非常長，我這裡不會將它粘貼在這裡，但它包含了許多後續非常有用的預設值。

配置PostCSS

現在，您需要微調PostCSS的配置以確保Tailwind運行正常。在postcss.config.js中添加以下內容：

module.exports = {
 "plugins": [
 require('tailwindcss')('tailwind.js'),
 require('autoprefixer')(),
 ]
}

如果將Vue CLI設置為將配置存儲在package.json中，請確保該文件中沒有PostCSS配置。默認情況下，Vue CLI會添加以下行：

 "postcss": {
 "plugins": {
 "autoprefixer": {}
 }
 },

請刪除它們，否則postcss.config.js文件將無法讀取。

創建CSS文件

現在在src/assets/css/tailwind.css中創建一個CSS文件，並添加以下內容：

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

在您的Vue應用程序中導入該文件

在main.js中導入Tailwind：

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

（在vue中的"@ “指的是"src/"）

就是這樣！現在重新啟動Vue CLI項目，應該一切正常運行。

測試是否正常工作

除非您添加了特定於Tailwind的類，否則您將不會注意到任何更改。

例如，請嘗試在模板中添加以下HTML代碼：

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
 Test
</div>

這將創建一個有顏色的框。