https://tailwindcss.com/


1. npm install 


2. npm install tailwindcss


3. 테일윈드 css config 파일만들기

1
npx tailwindcss init
cs





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


@tailwind base; @tailwind components; @tailwind utilities;



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


mix.js('resources/js/app.js', 'public/js')

    .sass('resources/sass/app.scss', 'public/css')

    .postCss('resources/css/tailwindcss.css', 'public/css', [

  require('tailwindcss'),

]);



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
<!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



+ Recent posts