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

8540 단어 tutoriallaraveltailwindcssvite
Tailwind은 최신 CSS 프레임워크입니다. 이것은 유틸리티 우선 기반 프레임워크이며 개발 프로세스를 매우 쉽게 만들고 고유한 디자인을 만드는 고유한 유틸리티 클래스 세트를 제공합니다. 유틸리티 우선 CSS는 빠르고 강력하며 매우 효율적이므로 코딩이 번거롭지 않습니다. Tailwind CSS도 독단적이지 않습니다. 그것은 당신이 디자인 애도와 웹 사이트의 구성 요소를 완전히 자유롭게 사용자 정의할 수 있음을 의미합니다.

Tailwind는 사용자 지정 CSS를 작성하지 않고 웹 사이트를 만드는 데 필요한 모든 기능을 갖춘 파워 팩입니다.

Laravel은 애플리케이션 개발을 위한 완전한 프레임워크입니다. 개발이 강력하고 쉬운 오픈 소스 PHP 프레임워크입니다. 가장 중요한 것은 맞춤형 CSS와 비교할 때 Laravel과 함께 Tailwind CSS를 사용하는 동안 코드 품질을 유지하기가 쉽다는 것입니다.

Vite 란 무엇입니까?



Vite("빠른"에 대한 프랑스어 단어, "veet"와 같이/vit/로 발음)는 최신 웹 프로젝트에 더 빠르고 간결한 개발 환경을 제공하는 것을 목표로 하는 빌드 도구입니다.

비테의 특징


  • 인스턴트 서버 시작
  • Lightning Fast HMR(핫 모듈 교체)
  • TypeScript, JSX, CSS 등을 지원합니다.
  • 최적화된 빌드
  • 범용 플러그인
  • 완전히 형식화된 API

    • Laravel이 "laravel 9.19"를 출시했습니다. 더 이상 webpack.mix.js 파일 대신 laravel 루트에 webpack.mix.js 파일 vite.config.js 파일이 도입되었습니다.

    이 기사에서는 VIte 3을 사용하여 Laravel 9에 Tailwind CSS 3를 설치합니다.

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



    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;


    vite.config.js에서 제거resources/css/app.css
    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 serve


    6단계: Laravel 개발 서버 실행




    php artisan serve


    이 블로그를 읽어주셔서 감사합니다.
    초보자를 위한 JavaScript 배열
    파티션 - Kotlin의 필터링 기능

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage