라라벨에서 TailwindCSS 사용하기 free
라라벨에서 TailwindCSS 사용하기
TailwindCSS라는 CSS 프레임워크가 인기를 끌고 있다. 2019년 7월 19일 기준 깃헙 지표로 보면 Used by 13,250, Star 13,162를 기록하고 있다. 최근에 진행한 토이 프로젝트에서 TailwindCSS 경험 삼아 써봤는데 나와 동료 모두 만족했고 당분간 계속 부트스트랩 대신 쓸 예정이다.
TailwindCSS를 만든 사람은 아담 와든(Adam Wathan)이라는 개발자로, 라라벨 진영에서도 꽤 유명한 사람이다. 홈페이지에서 그간의 발표했던 것과 글을 볼 수 있는데, 그 중 일부를 내 블로그에 소개한 적이 있다. 라라벨 제작자가 추천한 라라벨 코드 깔끔하게 짜는 방법 초간단 요약라는 글인데, 읽어보면 도움이 될 것이다.
라라벨에서 TailwindCSS를 사용할 수 있는 방법은 여러가지가 있다. 오늘은 그 중에서도 mix로 컴파일해서 쓰는 방법을 소개하겠다. 전체적인 내용은 Getting Started With TailwindCSS in Laravel를 참고했다.
1 단계: Tailwind 설치
라라벨 프로젝트 루트 디렉토리에서 npm으로 설치한다.
npm install tailwindcss
2 단계: Tailwind를 CSS에 추가
/resources/sass/app.scss 파일을 다음과 같이 변경한다. 부트스트랩은 사용하지 않을 것이므로 지운다.
Before
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito' );
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
After
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito' );
// Variables
@import 'variables';
// Tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;
3 단계: Laravel Mix Tailwind CSS 패키지 설치
아직 라라벨의 기본 의존 패키지를 설치하지 않았다면 설치한다.
npm install
Mix에서 Tailwind를 사용할 수 있게해주는 패키지를 설치한다.
npm install mix-tailwindcss --save-dev
이 패키지를 사용하기 위해 mix 파일에서 불러들인다. webpack.mix.js 파일을 열어 다음 코드를 추가한다.
require('mix-tailwindcss');
그리고 나서 .tailwind()를 덧붙인다.
const mix = require('laravel-mix');
require('mix-tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.tailwind();
4 단계: 에셋 컴파일
npm run dev
5 단계: 확인
라라벨에서 TailwindCSS를 쓸 준비가 끝났다. 잘 되었는지 확인해보자. 테스트용 라우트를 준비하자. routes/web.php를 열고 아래와 같이 라우트를 추가한다.
Route::get('/tailwind', function() {
return view('tailwind');
});
resources/views/tailwind. 파일을 만들고 아래의 내용을 채워넣는다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="h-screen bg-gray-300 flex items-center justify-center">
<h1 class="text-4xl font-bold">Tailwind 정상 작동 중!</h1>
</div>
</body>
</html>
5번째 줄에서 Mix로 컴파일한 css/app.css를 불러들인다. Tailwind가 함께 컴파일 되었기 때문에 css/app.css를 불러들이는 것만으로 Tailwind를 사용할 수 있다.
php artisan serv로 서버를 구동한 후 웹브라우저로 접근하면 다음과 같이 Tailwind가 정상적으로 작동한 것을 확인할 수 있을 것이다.
마치며
최근 인기를 끌고 있는 TailwindCSS를 라라벨에서 사용하는 방법을 알아봤다. 라라벨에서 npm 패키지를 어떤식으로 추가해서 사용하는지 감을 잡는데 도움이 됐으리라 생각한다.
TailwindCSS에 대해 더 알아보고 싶은 사람은 공식 홈페이지와 홈페이지에 있는 아담 와든의 동영상 강의를 참고하면 도움이 될 것이다.
===
오늘도 늦었네요 ㅠㅠ 죄송합니다.
1일 1식 라라벨
2019년 7월 19이
이현석
메쉬 코리아 개발자. 바쁜 팀장님 대신 알려주는 신입 PHP 개발자 안내서를 쓰고, 클린 아키텍처 인 PHP를 번역했습니다. 처음부터 제대로 배우는 라라벨(Laravel Up & Running 2nd Edition)을 번역했습니다.