導語
就在前段時間laravel更新了8.0版本，其中有一個新特性是Jetstream是Laravel的新應用程序支架，Jetstream使用Tailwind CSS，您可以在Livewire或Inertia之間進行選擇。于是我就開始了tailwindcss研究之旅。
簡介
一般的UI中CSS框架都是內建各種預設的組件，比如表單、按鈕、菜單、模態(tài)框等，當需要通過定制化設計時，組件的高度耦合性則帶來很大的弊端。Tailwind并不提供預先設計好的內建組件，而是提供了更為基礎的工具類（utility classes），可直接在HTML源碼上構建完全定制化的設計。
Tailwind是一個CSS框架的工具集，Tailwind的理念是抽取共用體（Utilities First）。
Tailwind CSS是一個高度可定制的基礎層CSS框架，提供了構建定制化所需的構建塊，無需重新覆蓋內建于框架內中的風格。
特性
響應式
Tailwind CSS的每個工具類都支持響應式布局，使用類似{screen}:的命名前綴以區(qū)分響應式類。組件友好
僅需使用工具類（utility classes）即可，Tailwind從重復模式中提取組件的工具類。可定制
Tailwind CSS是基于PostCSS開發(fā)的，通過JavaScript代碼配置。
核心
實用為主（Utility-First）
傳統(tǒng)的Web頁面設計需手工為HTML元素編寫CSS樣式，使用Tailwind可以直接在HTML使用預先定義的類名來設置元素的樣式。自適應設計（Responsive Design）
Tailwind中每個工具類均可有條件地應用到不同的斷點（breakpoint），默認情況下根據常見移動設備分辨率劃分了4個斷點，分別對應4個不同的媒體查詢。
安裝
使用CDN
<link rel="stylesheet">
注意：在使用CDN構建之前，請注意，如果沒有將Tailwind集成到您的構建過程中，那么許多使Tailwind CSS強大的功能將不可用。
- 您無法自定義Tailwind的默認主題
- 你不能使用任何指令一樣@apply，@variants等等。
- 您無法啟用以下功能 group-hover
- 您無法安裝第三方插件
- 您不能搖晃未使用的樣式
為了充分利用Tailwind，您確實應該通過npm安裝它。
使用NPM進行安裝
使用npm安裝Tailwind CSS,需要在電腦線安裝好node.js環(huán)境。這里不再講怎么安裝node,參考本博客的以前發(fā)布的文章。
初始化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"
},
在項目目錄創(chuàng)建public文件夾。
然后運行命令
npm run tailwind
即可完成構建，這時候我們發(fā)現(xiàn)public文件夾內多了styles.css文件，在項目中引用測試一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tailwindcss測試</title>
<link rel="stylesheet" href="public/styles.css" />
</head>
<body class="w-full h-screen flex justify-center items-center">
<div class="w-32 h-32 bg-red-600 rounded-3xl"></div>
</body>
</html>
查看瀏覽器，得到如下效果，說明tailwindcss構建成功了~
關注我，每天更新分享學習內容。
附原文：https://www.wjcms.net/archives/tailwindcss%E5%88%9D%E4%BD%93%E9%AA%8C%E4%B9%8B%E5%AE%89%E8%A3%85%E5%92%8C%E6%9E%84%E5%BB%BA
