Tailwind Tailwind是新的CSS实用程序框架,它很快成为我最喜欢的构建界面的方法。通常,尝试一个新的框架、包或语言的最困难的部分是建立起来。建造Tailwind的人做了一项令人难以置信的工作,记录了这个过程,而且非常容易做到。
Tailwind Tailwind是新的CSS实用程序框架,它很快成为我最喜欢的构建界面的方法。通常,尝试一个新的框架、包或语言的最困难的部分是建立起来。
建造Tailwind的人做了一项令人难以置信的工作,记录了这个过程,而且非常容易做到。但是,有时还是很高兴看到别人是怎么做到的。所以,让我们跳进去看看是怎么做到的。
首先,假设我们开始一个新的 Laravel 项目。 完成 Laravel 的所有设置之后,让我们看 Tailwind 的安装文档 点击这里.
在他们的文档,可以看到,最简单的方法就是把 CDN 放到你的项目中,然后开始编码。 这是很好的尝试,让我们进一步把它应用到我们的构建过程中。
我们可以使用 NPM
或者 Yarn
命令把 Tailwind 拉到我们的项目中。
# 使用 npm
npm install tailwindcss --save-dev
# 使用 Yarn
yarn add tailwindcss --dev
当包拖入到我们的项目中,我们可以生成 Tailwind 的配置文件。我们可以随意调用配置文件, 我们将其称为 tailwind.js
。现在, 我们可以在项目根目录下运行以下命令。
./node_modules/.bin/tailwind init tailwind.js
配置真的是小菜一碟,在项目的根路径中我们已经有了一个配置文件。打开并且查看它,你会发现,Tailwind 团队已经在文档注释和解析配置用途方面做出了出色的工作,你可以添加颜色,调整断点,间距等等。你会感觉到保持全局风格一致性是多么容易的事情啊!
让我们打开 resources/assets/sass
目录,laravel已经包含了一些开箱即用的默认文件,你可以忽略并且删除它们,如果你想这么做的话。
在当前目录中,我们可以创建index.sass
文件(你可以任意命名这个文件,只是不要把它命名为“late for dinner”!),现在,我们将会从Tailwind 中复制以下代码
@tailwind preflight;
@tailwind utilities;
注意到在@tailwind
导入的末尾有分号. 删除它们.在这一点上,如果你正在使用 PHPStORM, 您可能会注意到,文件结构上遍布一堆红线, 不要担心, 你可以忽略它们 或者找到一种方式将它们关闭. 如果你找到了一种将它们关闭的方式,请写一篇教程告诉我;).
这是主sass文件,我们可以导入我们自定义的sass文件, 同时在构建过程中可以把它们导出到public/css
文件夹下面.在导入你自定义的sass文件的时候, 一定要遵循导入的顺序,以避免你自定义的css被覆盖的问题。
在构建过程中添加 Tailwind。 打开 webpack.mix.js
文件。 在顶部, 右下方 let mix = require('laravel-mix');
添加 let tailwindcss = require('tailwindcss');
.
现在,在我们的 mix
中, 你可以像这样修改默认的 .sass
选项 (注意:如果你没有命名你的主 Sass 文件 index.sass
请确保在这更新它):
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/index.sass', 'public/css/app.css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.js') ],
});
当前 Minx 依赖项存在未解决的问题。我们要将 Sass 和 Tailwind 一起使用,并且需要禁用 processCssUrls。更多信息请参考文档。 点击这里.
最后, 运行 npm run prod
将 Tailwind 编译到 CSS 中。
在你的模板文件,现在你可以添加 <link href="{{ asset('css/app.css') }}" rel="stylesheet">
到你的 head
标签,并且开始使用 Tailwind 快速构建响应式 UI。
--结束END--
本文标题: 如何在Laravel中使用Tailwind CSS?
本文链接: https://www.lsjlt.com/news/117123.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0