如何在 Laravel 中加载 TailwindCSS ?

Laravel

在开始之前,请确保已安装Composernpm! (注意:如果您更喜欢使用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

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1

在项目中使用这个文件,请添加以下代码:
文中的

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

应该修改为

<link href="{{ asset('css/tw.css') }}" rel="stylesheet">
3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!