1. 라라벨7 설치
composer create-project --prefer-dist laravel/laravel laravel-movies
2. npm 패키지설치
npm install
3. 테일윈드CSS 패키지설치
https://tailwindcss.com/docs/installation/
npm install tailwindcss
4. resourcws/css/main.css 파일생성 후 아래의 코드 삽입
@tailwind base;
@tailwind components;
@tailwind utilities;
5. tailwind 구성파일 생성
프로젝트 디렉터리에 tailwind.config.js 파일이 생성된다.
6. 웹팩설정(webpack.mix.js)
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/main.css', 'public/css', [
require('tailwindcss'),
])
7. 빌드 실행 npm run dev
터미널에서 npm run dev 를 입력하면 컴파일을 해준다. 컴파일된 파일은 public/css/main.css 에 빌드된다.
8. views/welcome.blade.php 파일에 <head></head>안에 외부스타일을 링크해준다.
<!-- Styles -->
<link rel="stylesheet" href="/css/main.css">
테일윈드css코드를 입력한다.
<div class="title m-b-md bg-blue-500">
Laravel
</div>
9. 브라우저에서 접속해본다.
'라라벨 > laravel-movies' 카테고리의 다른 글
| 테일윈드css 로딩 스피너 설치 (0) | 2020.04.12 |
|---|---|
| 7. 디테일페이지 만들기 (0) | 2020.04.06 |
| 4. main, index, show 디자인양식 (0) | 2020.04.05 |
| 3. 구조잡기 (0) | 2020.04.05 |
| 2. Fontatwesome 설치하기 (0) | 2020.04.05 |