Morioh
Login
Duck Hwan

Duck Hwan

11 months ago

Vite 3을 사용하여 Laravel 9에 Tailwind CSS 3를 설치하는 방법

이 튜토리얼에서는 Vite 3을 사용하여 Laravel 9에 Tailwind CSS 3를 설치하는 방법을 배웁니다. Tailwind CSS는 개발 ​​프로세스 속도를 높이는 데 도움이 되는 유틸리티 우선 CSS 프레임워크입니다. Vite는 엄청나게 빠른 웹 애플리케이션을 만드는 데 도움이 되는 최신 빌드 도구입니다.

Vite 3을 사용하여 Laravel 9에 Tailwind CSS 3을 설치하려면 다음 단계를 따릅니다.

  • 1단계: Laravel 프로젝트 설치
  • 2단계: Tailwind CSS 설정
  • 3단계: app.css에 Tailwind CSS 추가
  • 4단계: Vite 자산을 Laravel Blade로 가져오기
  • 5단계: Vite 개발 서버 실행
  • 6단계: Laravel 개발 서버 실행
     

1단계: Laravel 프로젝트 설치

새로운 laravel 애플리케이션을 설치하고 있으므로 터미널로 이동하여 명령을 입력하고 새로운 laravel 앱을 생성하십시오.

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-tailwind3-vite3

또는 Laravel Installer를 글로벌 컴포저 의존성으로 설치한 경우:

laravel new laravel9-tailwind3-vite3

2단계: Tailwind CSS 설정

다음으로 tailwind와 관련 종속 항목(PostCSS 및 auto-prefixer)을 설치해야 합니다.

npm install -D tailwindcss postcss autoprefixer

Tailwind 및 게시 CSS 구성 파일을 생성합니다.

npx tailwindcss init -p

이렇게 하면 루트 디렉토리에 두 개의 파일이 생성됩니다:  tailwind.config.js 및  postcss.config.js. Tailwind 구성 파일은 앱에 대한 사용자 지정 및 테마를 추가하는 위치입니다. 페이지와 구성 요소를 검색할 경로를 Tailwind에 알려주는 곳이기도 합니다. 다음과 같이 보입니다.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

다음으로 tailwind.config.js에 템플릿 경로를 추가해야 합니다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3단계: app.css에 Tailwind CSS 추가

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

resources/css/app.css vite.config.js에서 제거 

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

다음으로 JavaScript를 통해 CSS를 가져와야 합니다. 일반적으로 이 작업은 애플리케이션  resources/js/app.js 파일에서 수행됩니다.

resources/js/app.js

import './bootstrap';
import '../css/app.css'

4단계: Vite 자산을 Laravel Blade로 가져오기

resources/views/welcome.blade.php

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 - TechvBlogs</title>

        @vite('resources/js/app.js')
    </head>

    <body class="antialiased">
        <div class="flex justify-center items-center h-screen">
            <h1 class="text-3xl text-purple-600 font-bold">How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 - TechvBlogs</h1>
        </div>
    </body>

</html>

5단계: Vite 개발 서버 실행

다음 명령을 실행하여 Vite 개발 서버를 시작합니다.

npm run dev

6단계: Laravel 개발 서버 실행

php artisan serve

즐거운 코딩!!!

1.45 GEEK