라라벨/laravel-movies
1. 라라벨7설치, 테일윈드css설치
땀모
2020. 4. 5. 17:22
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. 브라우저에서 접속해본다.
