Tailwind CSS 基本配置

最近的乙個專案使用了新的框架，這個框架中使用了 tailwind css。對這個 css 的框架不是很熟悉，所以在使用過程中會遇到一些問題。

對於這些問題記錄下。

本文章主要介紹 tailwind css 的安裝、基本配置等。

根據自己使用習慣是使用 npm 還是 yarn

# using npm

npm install tailwindcss
# using yarn
yarn add tailwindcss

tailwind css 分了幾個基本的模組，可以按需引入自己需要的基礎模組。

基本的匯入，使用 tailwind 指令

@tailwind base;

@tailwind components;
@tailwind utilities;

在一些專案中使用了 postcss-import 那麼匯入的方式是用 import

@import "tailwindcss/base";

@import "tailwindcss/components";
@import "tailwindcss/utilities";

提示：在上面這些模組中，base 模組一般不會匯入，因為有些基本的樣式我們是用不到的，例如 button 的 outline。

這個是直接使用命令建立（在專案根目錄下）

npx tailwindcss init

執行完成後會生成乙個配置檔案，預設是空的。

module.exports =,

},variants: {},
plugins: ,
}

專案中使用的 webpack，所以是在 webpack 中的 postcss-loader 中配置。

vue cli2.x 中這樣配置：

module.exports =,

},],}],
}}

vue cli3.x 中這樣配置：

module.exports =}},

}

提示：對於其他環境下的配置可以參考官方文件：tailwind 安裝

在 tailwind.config.js 配置檔案中可以根據實際情況自己定義。

在實際專案中遇到的問題是這樣的：使用 text-pink-700 這樣的樣式不生效。

檢視配置檔案是這樣的：

theme: 

}

顏色自定義了幾種顏色，沒有 pink-700 對應的顏色，所以不生效。

正常來說乙個專案中用到的顏色不會很多，使用什麼顏色配置就好。

上面的配置中新增：'pink-700':'#b83280' 後就可以正常使用。

colors: ,

tailwindcss 使用總結

安裝tailwindcss 安裝npm install tailwindcss 引入 在scss檔案引入，並匯入main.js生效 引入如下 注入 tailwind base tailwind components tailwind utilities 正常匯入 import tailwindcss...

filebeat的基本配置 基本配置）

filebeat 輸入配置編寫 基本配置 efk 中filebeat的檔案輸入 抽取本地檔案的配置檔案編寫 filebeat.inputs type log enabled true paths var log log var log log 抽取普通日誌。模組格式化抽取。type log path...

nginx配置一 基本配置

1 安裝完成nginx之後，首先需要明白的，資料返回的流程是怎麼樣的？這裡假設我們的後端伺服器是tomcat，web伺服器我們使用nginx。那麼請求流程如下圖 如上圖所示 我們的請求首先是被我們的web服務nginx攔截之後，再去請求後台服務的tomcat，然後後端的服務tomcat將我們的資料通...