如何在 Laravel 中加载 TailwindCSS ？

在开始之前，请确保已安装Composer和npm！ (注意：如果您更喜欢使用SASS或LESS，则以下教程可能不适用。)

如果尚未设置 Laravel 安装器，请按照以下步骤操作。否则，请跳过这两个步骤。

1.运行composer global require laravel/installer
2.从命令行cd进入要在其中安装Laravel的目录并运行laravel new myProjectName。将创建一个名为myProjectName的文件夹，并在其中安装Laravel。

安装 laravel 依赖

使用cd myProjectName命令进入项目根目录之后运行下面命令:

npm install 
npm install tailwindcss

然后继续:

cd resources
mkdir css

上面的命令将在resources中创建一个名为css的文件夹。

在resources/ css中，创建一个名为tw.css的文件(或您喜欢的任何名称-在本教程中，只需确保将文件名替换为tw.css)。该文件将包含您未编译的Tailwind CSS。在这里，您可以添加@tailwind base;，@tailwind components;，@tailwind utilities;等等。

接下来，打开项目中的wepback.config.js 文件，并添加以下代码：

mix.postCss('resources/css/tw.css', 'public/css', [
        require('tailwindcss'),
    ])
    .js('resources/js/app.js', 'public/js')

接下来运行npm run dev，Laravel Mix成功完成构建后，您应该在public / css中有一个文件，其中包含已构建的Tailwind CSS。在项目中使用这个文件，请添加以下代码：

<link href="{{ asset('css/tw.css') }}" rel="stylesheet">

现在您应该一切准备就绪了。 Happy coding!

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://dev.to/klickers/setting-up-tailw...

译文地址：https://learnku.com/laravel/t/41706