Laravel과 함께 Tailwind CSS 사용하기

Tailwind Tailwind는 인터페이스를 구축하는 데 있어 제가 가장 좋아하는 방법이 된 새로운 CSS 유틸리티 프레임워크입니다. 종종 새로운 프레임워크, 패키지 또는 언어를 시도할 때 가장 어려운 부분은 이를 설정하는 것입니다.

Tailwind를 만든 사람들은 프로세스를 문서화하는 놀라운 작업을 수행했으며 작업이 너무 쉬웠습니다. 그러나 때로는 다른 사람들이 어떻게 하는지 보는 것이 좋습니다. 이제 뛰어들어 어떻게 완료되었는지 살펴보겠습니다.

시작하기

먼저 새로운 Laravel 프로젝트를 시작한다고 가정해 보겠습니다. 설정 방법은 다루지 않겠습니다. 여기에서 설명서를 참조하세요. Laravel의 모든 설정을 완료한 후 여기를 클릭하여 Tailwind의 설치 문서를 살펴보겠습니다.

문서에서 가장 쉬운 방법은 CDN을 프로젝트에 넣고 코딩을 시작하는 것임을 알 수 있습니다. 시도해 보는 것이 좋습니다. 한 단계 더 나아가 빌드 프로세스에 적용해 보겠습니다.

Installation

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 团队已经在文档注释和解析配置用途方面做出了出色的工作，你可以添加颜色，调整断点，间距等等。你会感觉到保持全局风格一致性是多么容易的事情啊！
让我们打开 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";
 */

@tailwind 가져오기 끝에 세미콜론이 있는 것을 확인했습니다. 삭제하세요. 이 시점에서 PHPStorm을 사용하는 경우 파일 구조 전체에 빨간색 선이 많이 있는 것을 볼 수 있습니다. 걱정하지 마십시오. 무시하거나 끌 수 있는 방법을 찾을 수 있습니다. 이를 끄는 방법을 찾으면 튜토리얼을 작성하여 알려주세요 ;).

이것은 기본 Sass 파일이며, 사용자 정의 Sass 파일을 가져오고 빌드 프로세스 중에 public/ CSS 폴더. 사용자 정의된 sass 파일을 가져올 때 사용자 정의된 CSS를 덮어쓰는 문제를 방지하려면 가져오기 순서를 따르십시오.

빌드 프로세스

빌드 프로세스 중에 Tailwind를 추가하세요. webpack.mix.js 파일을 엽니다. 상단 오른쪽 하단에서 let mix = require('laravel-mix'); add let tailwindcss = require('tailwindcss');.

이제 믹스에서 기본 .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 종속성과 관련하여 해결되지 않은 문제가 있습니다. Tailwind와 함께 Sass를 사용할 예정이며 processCssUrls를 비활성화해야 합니다. 자세한 내용은 설명서를 참조하세요. 여기를 클릭하세요.

마지막으로 npm run prod를 실행하여 Tailwind를 CSS로 컴파일하세요.

완료

이제 템플릿 파일에서 Tailwind를 사용하여 반응형 UI를 빠르게 구축해 보세요.

추천 튜토리얼: "Laravel Tutorial"

위 내용은 Laravel과 함께 Tailwind CSS 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!