如何在 Laravel 中使用 TailwindCSS

TailwindCSS 是一款现代化的 CSS 框架，它致力于提高开发效率、简化 CSS 代码，并支持自定义样式。在 Laravel 中使用 TailwindCSS 可以大大提高界面开发效率。在本篇文章中，我们将介绍如何在 Laravel 应用程序中使用 TailwindCSS。

安装 TailwindCSS

首先，需要先安装 Node.js 和 npm 包管理器。然后，在 Laravel 根目录下执行以下命令：

npm install -D tailwindcss postcss autoprefixer

这将安装 TailwindCSS、PostCSS 和 Autoprefixer。

配置 TailwindCSS

执行以下命令生成默认的配置文件 tailwind.config.js：

npx tailwindcss init

然后，打开 webpack.mix.js 文件，添加以下代码：

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       tailwindcss('./tailwind.config.js'),
   ]);

此处定义了 Laravel Mix 编译 JavaScript 和 CSS 的方法。

添加 TailwindCSS 样式

TailwindCSS 提供了许多非常方便的 CSS 类，可以通过 HTML 标记使用。例如：

<div class="bg-blue-500 text-white font-semibold p-6">
    我是一个样例 div
</div>

这将创建一个具有蓝色背景、白色字体、半粗体字体、6 个 padding 的 div。

您可以在 TailwindCSS 文档 中找到更多的 CSS 类。

优化 TailwindCSS

在开发环境下，默认情况下 TailwindCSS 会创建大量的 CSS 样式，这会导致编译很慢和资源比较庞大。如果您想优化，可以通过以下步骤来实现：

1. 在 tailwind.config.js 文件中设置 purge 属性，以减少生成的 CSS 样式。

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.vue',
    './resources/**/*.js',
    // ...
  ],
  // ...
}

1. 为生产环境定义 webpack.mix.js 文件，以在生产环境中启用 CSS 压缩和最小化。

if (mix.inProduction()) {
  mix.postCss('resources/css/app.css', 'public/css', [
     require('cssnano'),
     tailwindcss('./tailwind.config.js'),
  ]);
}

总结

TailwindCSS 是一款出色的 CSS 框架，它可以帮助您加快 Laravel 应用程序的开发速度。在本篇文章中，我们简要介绍了如何安装和配置 TailwindCSS，并且演示了在 Laravel 视图中使用 TailwindCSS 的方法。同时我们还提供了一些优化技巧，以优化 TailwindCSS。我们希望这篇文章可以帮助您更好地使用 TailWindCSS，提高您的开发效率。

示例代码

<div class="bg-blue-500 text-white font-semibold p-6">
    我是一个样例 div
</div>

if (mix.inProduction()) {
  mix.postCss('resources/css/app.css', 'public/css', [
     require('cssnano'),
     tailwindcss('./tailwind.config.js'),
  ]);
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a42167add4f0e0ffc57b32