在 Laravel 中安裝 Tailwind CSS

2022-07-23 11:44 更新

創(chuàng)建您的工程

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

laravel new my-project
cd my-project

接下來，使用 ?npm ?安裝 Laravel 的前端依賴關(guān)系。

npm install

初始化 Tailwind CSS

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

通過 npm 安裝 Tailwind

安裝 Tailwind 以及其它依賴項(xiàng):

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

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

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

npx tailwindcss init

這將會在您的項(xiàng)目根目錄創(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 ?選項(xiàng)指定所有的 Blade templates 和 JavaScript components 文件，使得 Tailwind 可以在生產(chǎn)構(gòu)建中對未使用的樣式進(jì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 默認(rèn)為您生成的 ./resources/css/app.css 文件并使用 ?@tailwind? 指令來包含 Tailwind的 ?base?、 ?components ?和 ?utilities ?樣式，來替換掉原來的文件內(nèi)容。

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

Tailwind 會在構(gòu)建時將這些指令轉(zhuǎn)換成所有基于您配置的設(shè)計(jì)系統(tǒng)生成的樣式文件。

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

<!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)在，當(dāng)您運(yùn)行 ?npm run watch?, ?npm run dev? 或 ?npm run prod?, Tailwind CSS 就可以在您的 Laravel Mix 項(xiàng)目中使用了。

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

寫筆記

我要補(bǔ)充