Laravel v8.8.1 이상으로 TailwindCSS v3 설정.

4087 단어 tailwindcssv3tutoriallaravel
Tailwind는 개발자가 많은 시간을 낭비하지 않고 매우 빠르게 제품을 빌드하고 설계할 수 있도록 도와주는 유틸리티 우선 CSS 프레임워크입니다.

이 기사에서는 laravel 프로젝트에서 tailwind를 구성하고 설정하는 방법을 살펴볼 것입니다.

계속 진행하기 전에 개발 환경이 Laravel 에 대해 설정되어 있는지 확인하십시오.
아래 명령으로 laravel 프로젝트를 부트스트랩하는 것으로 시작하겠습니다.

laravel new sample-app


또는




composer create-project laravel/laravel sample-app


다음을 수행하여 프로젝트 디렉토리로 이동합니다.

cd sample-app


터미널에서 아래 명령을 사용하여 프로젝트를 실행해 보겠습니다.

php artisan serve


위의 명령은 프로젝트를 시작하고 계속 실행합니다. http://127.0.0.1:8000에서 즐겨찾는 브라우저를 통해 액세스할 수 있습니다.



이제 다음을 수행하여 이미 laravel 프로젝트에 tailwindcss를 설치할 수 있습니다.

npm install -D tailwindcss postcss autoprefixer


그런 다음 구성 파일을 만듭니다.

npx tailwindcss init


아래 이미지와 같은 메시지가 표시되어야 합니다.
preview

이제 즐겨 사용하는 코드 편집기에서 프로젝트를 열고 tailwind.config.js 배열 내의 content 파일에 다음을 추가합니다.

'./resources/**/*.blade.php',
'./resources/**/*.js',


이제 Laravel Mix를 사용하여 Tailwind 리소스를 컴파일하도록 Laravel에 알려야 합니다. 프로젝트 루트에서 webpack.mix.js 파일을 열고 아래와 같이 tailwindcss를 postCss 플러그인으로 포함합니다.

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss")
    ]);


마지막으로 모든 구성 요소 레이어를 프로젝트 CSS로 가져와야 합니다. resources/css/app.css 파일을 열고 다음을 추가합니다.

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


짜잔! 구성이 완료되고 개발 중에 실시간으로 변경 사항을 관찰하고 자산을 컴파일할 수 있습니다.

npx mix watch


아래 이미지와 같은 것이 있어야 합니다.

welcome.blade.php 파일을 열고 설정을 테스트하기 위해 모든 파일을 아래 코드로 교체해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body class="bg-[#063970]">
    <div class="text-center mt-12">
        <h1 class="text-4xl text-white font-semibold">Welcome!!!</h1>
        <p class="text-xl text-white mt-4">This is a tailwind page</p>
    </div>
</body>
</html>


아래 이미지와 같은 화면이 있어야 합니다.


이것이 laravel 프로젝트에서 tailwindCSS를 설정하기 위해 필요한 모든 것입니다.

즐거운 코딩!
정규 분포 모니터 90점 이상 득점자 추정
Delphi에서str 함수 사용법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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