라라벨에서 TailwindCSS 사용하기 free

2019-07-19

벨에서 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.blade.php을 만들고 아래의 내용을 채워넣는다.



<!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가 정상적으로 작동한 것을 확인할 수 있을 것이다.

스크린샷 2019-07-20 오전 1.07.43.png


마치며


최근 인기를 끌고 있는 TailwindCSS를 벨에서 사용하는 방법을 알아봤다. 벨에서 npm 패키지를 어떤으로 추가해서 사용하는지 감을 잡는데 도움이 됐으리 생각한다.


TailwindCSS에 대해 더 알아보고 싶은 사람은 홈페이지와 홈페이지에 있는 아담 와든의 동영상 강의를 참고하면 도움이 될 것이다.

===

오늘도 늦었네요 ㅠㅠ 죄송합니다.

1 1

2019년 7월 19이


유료 구독자 전용 레터입니다.

한 달 1만원으로 매일 라라벨 관련 메일 받아보시고 과거 메일도 열람하세요. 일반 구독으로 공개글만 받아보실 수도 있습니다.

구독하기 버튼을 눌러주시면 구독과 동시에 xly에도 가입됩니다.

이현석

바쁜 팀장님 대신 알려주는 신입 PHP 개발자 안내서를 쓰고, 클린 아키텍처 인 PHP를 번역했습니다. 2020년에 출간될 Laravel Up & Running 2nd Edition을 번역하고 있습니다.