<tfoot id="kwqq6"><strong id="kwqq6"></strong></tfoot>
<tbody id="kwqq6"></tbody>

Tailwind CSS 入門
1. Tailwind CSS 安裝
2. Tailwind CSS 發(fā)布說明
3. Tailwind CSS 升級指南
4. Tailwind CSS 編輯器支持
5. Tailwind CSS 使用預處理器
6. Tailwind CSS 生產(chǎn)優(yōu)化
7. Tailwind CSS 瀏覽器支持
Tailwind CSS 核心概念
1. Tailwind CSS 功能類優(yōu)先
2. Tailwind CSS 響應式設計
3. Tailwind CSS 懸停、焦點和其他狀態(tài)
4. Tailwind CSS 深色模式
5. Tailwind CSS 添加基礎樣式
6. Tailwind CSS 提取組件
7. Tailwind CSS 添加新的功能類
8. Tailwind CSS 函數(shù)與指令
Tailwind CSS 定制
1. Tailwind CSS 配置
2. Tailwind CSS Just-in-Time Mode
3. Tailwind CSS 主題
4. Tailwind CSS 斷點
5. Tailwind CSS 顏色
6. Tailwind CSS 間距
7. Tailwind CSS 變體
8. Tailwind CSS 插件
9. Tailwind CSS 預設
Tailwind CSS 基礎樣式
1. Tailwind CSS Preflight
Tailwind CSS 布局
1. Tailwind CSS 容器
2. Tailwind CSS Box Decoration Break
3. Tailwind CSS Box Sizing
4. Tailwind CSS Display
5. Tailwind CSS 浮動
6. Tailwind CSS 清除浮動
7. Tailwind CSS Isolation
8. Tailwind CSS Object Fit
9. Tailwind CSS Object Position
10. Tailwind CSS Overflow
11. Tailwind CSS Overscroll Behavior
12. Tailwind CSS 定位
13. Tailwind CSS Top / Right / Bottom / Left
14. Tailwind CSS 可見性
15. Tailwind CSS Z-Index
Tailwind CSS 彈性盒子和網(wǎng)格
1. Tailwind CSS Flex Direction
2. Tailwind CSS Flex Wrap
3. Tailwind CSS Flex
4. Tailwind CSS Flex Grow
5. Tailwind CSS Flex Shrink
6. Tailwind CSS Order
7. Tailwind CSS Grid Template Columns
8. Tailwind CSS Grid Column Start / End
9. Tailwind CSS Grid Template Rows
10. Tailwind CSS Grid Row Start / End
11. Tailwind CSS Grid Auto Flow
12. Tailwind CSS Grid Auto Columns
13. Tailwind CSS Grid Auto Rows
14. Tailwind CSS Gap
15. Tailwind CSS Justify Content
16. Tailwind CSS Justify Items
17. Tailwind CSS Justify Self
18. Tailwind CSS Align Content
19. Tailwind CSS Align Items
20. Tailwind CSS Align Self
21. Tailwind CSS Place Content
22. Tailwind CSS Place Items
23. Tailwind CSS Place Self
Tailwind CSS 間距
1. Tailwind CSS 內(nèi)邊距
2. Tailwind CSS 外邊距
3. Tailwind CSS 間距
Tailwind CSS 尺寸
1. Tailwind CSS 寬度
2. Tailwind CSS 最小寬度
3. Tailwind CSS 最大寬度
4. Tailwind CSS 高度
5. Tailwind CSS 最小高度
6. Tailwind CSS 最大高度
Tailwind CSS 排版
1. Tailwind CSS 字體序列
2. Tailwind CSS 字體大小
3. Tailwind CSS 字體平滑度
4. Tailwind CSS 字體樣式
5. Tailwind CSS 字體粗細
6. Tailwind CSS Font Variant Numeric
7. Tailwind CSS 字母間距
8. Tailwind CSS 行高
9. Tailwind CSS 列表項標記類型
10. Tailwind CSS 列表項標記位置
11. Tailwind CSS 占位文本顏色
12. Tailwind CSS 占位文本不透明度
13. Tailwind CSS 文本對齊
14. Tailwind CSS 文本顏色
15. Tailwind CSS 文本顏色不透明度
16. Tailwind CSS 文本裝飾
17. Tailwind CSS 文本轉換
18. Tailwind CSS 文本溢出
19. Tailwind CSS 垂直對齊
20. Tailwind CSS 空格
21. Tailwind CSS 文本換行
Tailwind CSS 背景
1. Tailwind CSS 背景圖像固定
2. Tailwind CSS 背景圖像裁剪
3. Tailwind CSS 背景顏色
4. Tailwind CSS 背景顏色不透明度
5. Tailwind CSS Background Origin
6. Tailwind CSS 背景圖像位置
7. Tailwind CSS 背景圖像重復
8. Tailwind CSS 背景圖像大小
9. Tailwind CSS 背景圖像
10. Tailwind CSS 漸變色停止
Tailwind CSS 邊框
1. Tailwind CSS 邊框圓角
2. Tailwind CSS 邊框厚度
3. Tailwind CSS 邊框顏色
4. Tailwind CSS 邊框不透明度
5. Tailwind CSS 邊框樣式
6. Tailwind CSS 分割線厚度
7. Tailwind CSS 分割線顏色
8. Tailwind CSS 分割線不透明度
9. Tailwind CSS 分割線樣式
10. Tailwind CSS 輪廓環(huán)厚度
11. Tailwind CSS 輪廓環(huán)顏色
12. Tailwind CSS 輪廓環(huán)不透明度
13. Tailwind CSS 輪廓環(huán)偏移厚度
14. Tailwind CSS 輪廓環(huán)偏移顏色
Tailwind CSS 效果
1. Tailwind CSS 盒陰影
2. Tailwind CSS 不透明度
3. Tailwind CSS Mix Blend Mode
4. Tailwind CSS Background Blend Mode
Tailwind CSS 過濾器
1. Tailwind CSS Filter
2. Tailwind CSS Blur
3. Tailwind CSS Brightness
4. Tailwind CSS Contrast
5. Tailwind CSS Drop Shadow
6. Tailwind CSS Grayscale
7. Tailwind CSS Hue Rotate
8. Tailwind CSS Invert
9. Tailwind CSS Saturate
10. Tailwind CSS Sepia
11. Tailwind CSS Backdrop Filter
12. Tailwind CSS Backdrop Blur
13. Tailwind CSS Backdrop Brightness
14. Tailwind CSS Backdrop Contrast
15. Tailwind CSS Backdrop Grayscale
16. Tailwind CSS Backdrop Hue Rotate
17. Tailwind CSS Backdrop Invert
18. Tailwind CSS Backdrop Opacity
19. Tailwind CSS Backdrop Saturate
20. Tailwind CSS Backdrop Sepia
Tailwind CSS 表格
1. Tailwind CSS 表格邊框
2. Tailwind CSS 表格布局
Tailwind CSS 過渡和動畫
1. Tailwind CSS 過渡屬性
2. Tailwind CSS 過渡持續(xù)時間
3. Tailwind CSS 過渡計時函數(shù)
4. Tailwind CSS 過渡延遲
5. Tailwind CSS 動畫
Tailwind CSS 轉換
1. Tailwind CSS 變換
2. Tailwind CSS 變換原點
3. Tailwind CSS 縮放
4. Tailwind CSS 旋轉
5. Tailwind CSS 平移
6. Tailwind CSS 傾斜
Tailwind CSS 交互
1. Tailwind CSS 表單外觀
2. Tailwind CSS 光標效果
3. Tailwind CSS 輪廓
4. Tailwind CSS 指向事件
5. Tailwind CSS 大小調(diào)整
6. Tailwind CSS 用戶選擇
Tailwind CSS SVG
1. Tailwind CSS 填充
2. Tailwind CSS 線條
3. Tailwind CSS 線條厚度
Tailwind CSS 可訪問性
1. Tailwind CSS 屏幕閱讀器
Tailwind CSS 官方插件
1. Tailwind CSS Typography
2. Tailwind CSS Forms
3. Tailwind CSS Aspect Ratio
4. Tailwind CSS Line Clamp

閱讀(1.2k) 書簽贊(0) 我要糾錯

在 Laravel 中安裝 Tailwind CSS

2022-07-23 11:44 更新

創(chuàng)建您的工程

如果您還沒有建立一個新的 Laravel 項目，請先創(chuàng)建一個新的項目。最常見的方法是使用 the Laravel Installer：

laravel new my-project
cd my-project

接下來，使用 ?npm ?安裝 Laravel 的前端依賴關系。

npm install

初始化 Tailwind CSS

Tailwind CSS 需要 Node.js 12.13.0 或更高版本。

通過 npm 安裝 Tailwind

安裝 Tailwind 以及其它依賴項:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

創(chuàng)建您的配置文件

接下來，生成您的 ?tailwind.config.js? 文件：

npx tailwindcss init

這將會在您的項目根目錄創(chuàng)建一個最小化的 ?tailwind.config.js? 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

配置 Tailwind 來移除生產(chǎn)環(huán)境下沒有使用到的樣式聲明

在您的 ?tailwind.config.js? 文件中，配置 ?purge ?選項指定所有的 Blade templates 和 JavaScript components 文件，使得 Tailwind 可以在生產(chǎn)構建中對未使用的樣式進行搖樹優(yōu)化。

// tailwind.config.js
  module.exports = {
    purge: [],
    purge: [
      './resources/**/*.blade.php',
      './resources/**/*.js',
      './resources/**/*.vue',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

在 Laravel Mix 中配置 Tailwind

在您的 ?webpack.mix.js? 中，添加 ?tailwindcss ?作為 PostCSS 插件。

// webpack.mix.js
  mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
      require("tailwindcss"),
    ]);

在您的 CSS 中引入 Tailwind

打開 Laravel 默認為您生成的 ./resources/css/app.css 文件并使用 ?@tailwind? 指令來包含 Tailwind的 ?base?、 ?components ?和 ?utilities ?樣式，來替換掉原來的文件內(nèi)容。

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 會在構建時將這些指令轉換成所有基于您配置的設計系統(tǒng)生成的樣式文件。

接下來，在您的主 Blade 布局（通常是 ?resources/views/layouts/app.blade.php? 或類似）中導入您的樣式表，并添加響應式視口元標記（如果它尚不存在）：

<!doctype html>

<head>
  <!-- ... --->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<!-- ... --->

您已經(jīng)完成了所有步驟！現(xiàn)在，當您運行 ?npm run watch?, ?npm run dev? 或 ?npm run prod?, Tailwind CSS 就可以在您的 Laravel Mix 項目中使用了。

以上內(nèi)容是否對您有幫助：

寫筆記

我要補充