Tailwind CSS安裝和構建的正確操做方式

時間 2020-12-01

標籤 css html node laravel npm json 瀏覽器 app 框架工具欄目 CSS 简体版

原文原文鏈接

導語

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

簡介

通常的UI中CSS框架都是內建各類預設的組件，好比表單、按鈕、菜單、模態框等，當須要經過定製化設計時，組件的高度耦合性則帶來很大的弊端。Tailwind並不提供預先設計好的內建組件，而是提供了更爲基礎的工具類（utility classes），可直接在HTML源碼上構建徹底定製化的設計。html

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

特性

響應式
Tailwind CSS的每一個工具類都支持響應式佈局，使用相似{screen}:的命名前綴以區分響應式類。laravel
組件友好
僅需使用工具類（utility classes）便可，Tailwind從重複模式中提取組件的工具類。npm
可定製
Tailwind CSS是基於PostCSS開發的，經過JavaScript代碼配置。json

核心

實用爲主（Utility-First）
傳統的Web頁面設計需手工爲HTML元素編寫CSS樣式，使用Tailwind能夠直接在HTML使用預先定義的類名來設置元素的樣式。瀏覽器
自適應設計（Responsive Design）
Tailwind中每一個工具類都可有條件地應用到不一樣的斷點（breakpoint），默認狀況下根據常見移動設備分辨率劃分了4個斷點，分別對應4個不一樣的媒體查詢。app

安裝

使用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="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構建成功了~

關注我，天天更新分享學習內容。