Just-in-Time: The Next Generation of Tailwind CSS
Tailwind CSS on GitHub

在 Laravel 中安装 Tailwind CSS

在 Laravel 工程中配置 Tailwind CSS。

创建您的工程

如果您还没有建立一个新的 Laravel 项目,请先创建一个新的项目。最常见的方法是使用 the Laravel Installer

laravel new my-project
cd my-project

接下来,使用 npm 安装 Laravel 的前端依赖关系。

npm install

初始化 Tailwind CSS

Tailwind CSS requires Node.js 12.13.0 or higher.

Install Tailwind via npm

安装 Tailwind 以及其它依赖项:

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

创建您的配置文件

接下来,生成您的 tailwind.config.js 文件:

npx tailwindcss init

这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件:

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

阅读配置文档了解更多。

配置 Tailwind 来移除生产环境下没有使用到的样式声明

在您的 tailwind.config.js 文件中,配置 purge 选项指定所有的 Blade templates 和 JavaScript components 文件,使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。

  // 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的 basecomponentsutilities 样式,来替换掉原来的文件内容。

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

Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

阅读我们的文档添加基础样式提取组件,和添加新的功能类,以获得用您自己的自定义 CSS 扩展 Tailwind 的最佳实践。

Next, import your stylesheet in your main Blade layout (commonly resources/views/layouts/app.blade.php or similar) and add the responsive viewport meta tag if it’s not already present:

  <!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>
  <!-- ... --->

您已经完成了所有步骤!现在,当您运行 npm run watch, npm run devnpm run prod, Tailwind CSS 就可以在您的 Laravel Mix 项目中使用了。

接下来了解一下功能类优先的工作流程