導語

就在前段時間laravel更新了8.0版本，其中有一個新特性是Jetstream是Laravel的新應用程式支架，Jetstream使用Tailwind CSS，您可以在Livewire或Inertia之間進行選擇，于是我就開始了tailwindcss研究之旅，

簡介

一般的UI中CSS框架都是內建各種預設的組件，比如表單、按鈕、選單、模態框等，當需要通過定制化設計時，組件的高度耦合性則帶來很大的弊端，Tailwind并不提供預先設計好的內建組件，而是提供了更為基礎的工具類（utility classes），可直接在HTML原始碼上構建完全定制化的設計，

Tailwind是一個CSS框架的工具集，Tailwind的理念是抽取共用體（Utilities First），
Tailwind CSS是一個高度可定制的基礎層CSS框架，提供了構建定制化所需的構建塊，無需重新覆寫內建于框架內中的風格，

特性

回應式
Tailwind CSS的每個工具類都支持回應式布局，使用類似{screen}:的命名前綴以區分回應式類，
組件友好
僅需使用工具類（utility classes）即可，Tailwind從重復模式中提取組件的工具類，
可定制
Tailwind CSS是基于PostCSS開發的，通過JavaScript代碼配置，

核心

實用為主（Utility-First）
傳統的Web頁面設計需手工為HTML元素撰寫CSS樣式，使用Tailwind可以直接在HTML使用預先定義的類名來設定元素的樣式，
自適應設計（Responsive Design）
Tailwind中每個工具類均可有條件地應用到不同的斷點（breakpoint），默認情況下根據常見移動設備解析度劃分了4個斷點，分別對應4個不同的媒體查詢，

安裝

使用CDN

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

注意：在使用CDN構建之前，請注意，如果沒有將Tailwind集成到您的構建程序中，那么許多使Tailwind CSS強大的功能將不可用，

您無法自定義Tailwind的默認主題
你不能使用任何指令一樣@apply，@variants等等，
您無法啟用以下功能 group-hover
您無法安裝第三方插件
您不能搖晃未使用的樣式

為了充分利用Tailwind，您確實應該通過npm安裝它，

使用NPM進行安裝

使用npm安裝Tailwind CSS,需要在電腦線安裝好node.js環境，這里不再講怎么安裝node,參考本博客的以前發布的文章，

初始化npm組態檔

使用命令初始化package.json組態檔

npm init

然后一直回車，直到完成(大概10次左右)，

或者還有更簡單的方法，這里是不是應該寫在前邊的，(⊙o⊙)…

npm init -y

這樣就初始化好了package.json組態檔，

安裝tailwindcss擴展包

npm install tailwindcss

這里我們可以看到，安裝的是1.9.6版本，

安裝postcss-cli和autoprefixer擴展包

npm install postcss-cli autoprefixer

將Tailwind添加到CSS

使用@tailwind指令注入順風的base，components和utilities風格為你的CSS：
在專案目錄新建src目錄，新建styles.css檔案，包含如下內容，

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

css構建

修改package.json檔案scripts如下：

"scripts": {
    "tailwind": "tailwindcss build src/styles.css -o public/styles.css"
  },

在專案目錄創建public檔案夾，

然后運行命令

npm run tailwind

即可完成構建，這時候我們發現public檔案夾內多了styles.css檔案，在專案中參考測驗一下，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tailwindcss測驗</title>
	<link rel="stylesheet" href="https://www.cnblogs.com/wjcms/archive/2020/11/16/public/styles.css" />
</head>
<body >
	<div ></div>
</body>
</html>