Using Tailwind CSS with Laravel

Tailwind Tailwind is a new CSS utility framework that has quickly become my favorite way to build interfaces. Often the hardest part of trying a new framework, package or language is getting it set up.

The guys who built Tailwind did an incredible job documenting the process and it was so easy to do. But, sometimes it's nice to see how others do it. So, let’s jump in and see how it’s done.

Getting Started

First, let’s assume we start a new Laravel project. I won't go into how to set it up, you can refer to the documentation here. After completing all the setup of Laravel, let's take a look at Tailwind's installation documentation click here.

In their documentation, you can see that the easiest way is to put the CDN into your project and start coding. This is nice to try, let's take it a step further and apply it to our build process.

Installation

We can use NPM or Yarn command to pull Tailwind into our project.

# 使用 npm
npm install tailwindcss --save-dev
# 使用 Yarn
yarn add tailwindcss --dev
当包拖入到我们的项目中，我们可以生成 Tailwind 的配置文件。我们可以随意调用配置文件， 我们将其称为 tailwind.js。现在，我们可以在项目根目录下运行以下命令。
./node_modules/.bin/tailwind init tailwind.js
Configuration
配置真的是小菜一碟，在项目的根路径中我们已经有了一个配置文件。打开并且查看它，你会发现，Tailwind 团队已经在文档注释和解析配置用途方面做出了出色的工作，你可以添加颜色，调整断点，间距等等。你会感觉到保持全局风格一致性是多么容易的事情啊！
让我们打开 resources/assets/sass 目录，laravel 已经包含了一些开箱即用的默认文件，你可以忽略并且删除它们，如果你想这么做的话。
Sass Setup
在当前目录中，我们可以创建 index.sass 文件（你可以任意命名这个文件，只是不要把它命名为 “late for dinner”！），现在，我们将会从 Tailwind 中复制以下代码
/**
 * 这个注入了Tailwind 的基本样式, 它混合了Normalize.css和一些额外的基本样式
 *
 * 你可以在以下链接中看到这些样式:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@tailwind preflight;
/**
 * 在这里你可以添加任何自定义的组件类; 任何你想要在实用类加载之前加载的东  西都可以定义在这里，以便他们仍然可以被实用类覆盖
 *
 * 例如:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * 或者是否使用前置处理器:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */
/**
 * 这个注入了Tailwind所有的实用类，它的产生依赖于你的配置文件
 */
@tailwind utilities;
/**
 * 这里你可以添加任何自定义的实用类，他们不随着Tailwind开箱即用
 *
 * 例如 :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * 或者是否使用前置处理器..
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

Notice the semicolon at the end of the @tailwind import. Delete them. At this point, if you are using PHPStorm, you may notice that the file structure has a bunch of red lines all over it, don't worry, you can ignore them or find a way to turn them off. If you find a way to turn them off, please write a tutorial and let me know ;).

This is the main sass file, we can import our custom sass files, and during the build process Export them to the public/css folder. When importing your customized sass files, be sure to follow the order of import to avoid the problem of your customized css being overwritten.

Build Process

Add Tailwind during the build process. Open the webpack.mix.js file. At the top, lower right let mix = require('laravel-mix'); add let tailwindcss = require('tailwindcss');.

Now, in our mix, you can modify the default like this .sass options (note: if you didn't name your main Sass file index.sass make sure to update it here):

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') ],
    });

There are currently unresolved issues with Minx dependencies. We are going to use Sass with Tailwind and need to disable processCssUrls. Please refer to the documentation for more information. Click here.

Finally, run npm run prod to compile Tailwind into CSS.

End

In your template file, now you can add to your head tag and start using Tailwind to quickly build responsive UI.

Recommended tutorial: "Laravel Tutorial"

The above is the detailed content of Using Tailwind CSS with Laravel. For more information, please follow other related articles on the PHP Chinese website!