1. 테일윈드(CSS프레임워크) 설치하기

1
npm install tailwindcss
cs


2. 테일윈드 구성파일설치

1
npx tailwind init
cs


프로젝트 디렉토리에 tailwind.config.js 파일이 생성되었다.


3.  resources/css/tailwindcss.css 파일을 만들어서 다음과 같은 소스를 작성한다. https://tailwindcss.com/docs/installation/

1
2
3
4
5
@tailwind base;
 
@tailwind components;
 
@tailwind utilities;
cs




4. webpack.mix.js 에 laravel mix를 작성해준다. css경로는 좀전에 만들어준 resources/css/tailwindcss.css 를 입력해준다.


1
2
3
4
5
6
7
8
9
mix.js('resources/js/app.js', 'public/js')
 
    .sass('resources/sass/app.scss', 'public/css')
 
    .postCss('resources/css/tailwindcss.css', 'public/css', [
 
      require('tailwindcss'),
 
]);
cs


5. 터미널에서 npm run dev 를 입력하면 컴파일을 해준다. 컴파일된 파일은 public/css/tailwindcss.css 에 빌드된다.


6. css적용과 예제를 입력해보자 view/welcome.blade.php     {{ mix('css/tailwindcss.css') }}

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>tailwindcss</title>
    <link rel="stylesheet" type="text/css" href="{{ mix('css/tailwindcss.css') }}">
</head>
<body>
<div class="text-4xl font-bold text-center text-blue-500">Hello world!</div>
</body>
</html>
 
cs


7. 브라우저에서 확인해보자


8. 파일명 수정

welcome.blade.php -> app.blade.php 파일명 수정

routes/web.php -> welcome -> app 로 수정

public/css/app.css 로 수정



9. app.blade.php 파일 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" type="text/css" href="/css/tailwindcss.css">
        <title>Laravel</title>
 
 
    </head>
    <body>
    <!-- <div class="text-4xl font-bold text-center text-blue-500">Hello world!</div> -->
 
       <div id="app">
 
            <div class="container mx-auto">
 
                <header class="py-6 mb-8">
 
                    <h1 class="text-4xl">Laracasts</h1>
                </header>
 
                <main class="flex">
                    
                    <aside class="w-1/5">
 
                        <section class="mb-8">
 
                            <h5 class="text-1xl uppercase font-bold mb-4">The Brand</h5>
 
                           <ul>
                             <li class="text-sm pb-4"> <router-link to="/">Home</router-link></li>
                             <li class="text-sm pb-4"> <router-link to="/about">About</router-link></li>
                         </ul>
                            
                        </section>
 
                        <h5 class="text-1xl uppercase font-bold mb-4">Doodles</h5>
 
                        <ul>
                           <li class="text-sm pb-4"> <router-link to="/">Home</router-link></li>
                           <li class="text-sm pb-4"> <router-link to="/about">About</router-link></li>
                       </ul>
 
                       
                       
                    </aside>
 
                    <div class="primary">
                        <router-view></router-view>
                    </div>
 
                </main>
     
           </div>
            
        </div>
 
       <script src="/js/app.js"></script>
 
    </body>
</html>
 
cs



저작자표시

'라라벨 > Vue(laravle)' 카테고리의 다른 글

404페이지 설정하기  (0) 2020.01.13
01)라라벨에 뷰 라우터 설치하기  (0) 2020.01.13
laravel+vue+tailwindcss  (0) 2019.08.24
laravel vue axjos  (0) 2019.08.05
라라벨 뷰 적용하기  (0) 2019.08.03

+ Recent posts

티스토리툴바