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
Configuration
配置真的是小菜一碟,在项目的根路径中我们已经有了一个配置文件。打开并且查看它,你会发现,Tailwind 团队已经在文档注释和解析配置用途方面做出了出色的工作,你可以添加颜色,调整断点,间距等等。你会感觉到保持全局风格一致性是多么容易的事情啊!
让我们打