node 설치되어 있어야함
01. 폴더생성
02. 패키지 JSON파일 생성 package.json생성됨
1 | npm init -y | cs |
03. 종속성 설치 !에러시 package.json 열어서 name값을 변경해주고 다시 실행한다. package-lock.json과 node_modules 폴더생성됨
1 | npm install tailwindcss postcss-cli autoprefixer | cs |
04. tailwind.config.js 파일생성
1 | npx tailwind init | cs |
npx tailwind init tailwind-full.config.js --full (완전한 구성파일 생성)
05. postcss.config.js 파일을 만든다.
06. postcss.config.js 소스작성
1 2 3 4 5 6 | module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] } | cs |
07. 프로젝트 디렉터리에 css/tailwind.css 파일을 만든다.
08. tailwind.css 지시문을 추가한다.
1 2 3 | @tailwind base; @tailwind components; @tailwind utilities; | cs |
09. package.json파일에 간단한 빌드 스크립트를 추가
1 2 3 4 5 6 7 | { // ... "scripts": { "build": "postcss css/tailwind.css -o public/build/tailwind.css" }, // ... } | cs |
10. 빌드 스크립트를 실행하여 CSS를 생성
1 | npm run build | cs |
빌드된 파일이 생성되었다. public/build/tailwind.css 파일을 html에 링크시키면 된다.
11. 컴파일 된 CSS를 포함하는 간단한 HTML 파일을 작성 프로젝트디렉터리/public/index.html
1 2 3 4 5 6 7 8 9 10 11 12 | <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="/build/tailwind.css"> </head> <body> <h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1> </body> </html> | cs |
12. 브라우저에서 프로젝트 창에 접속하면 아래와 같이 나오면 성공!
13. 실시간 소스반영 live-server 사용방법
터미널에서 npm install -g live-server 설치 안되면 sudo npm install -g live-server
14. live-server public 서버부트한다.
'tailwindcss' 카테고리의 다른 글
| 현재선택 목록 css 사용자 정의 (0) | 2020.01.13 |
|---|---|
| purgecss 사용방법( 사용하지 않는 css 제거 라이브러리 ) (0) | 2019.08.20 |
| 커스터마이징 (0) | 2019.08.20 |
| tailwind css syntax (0) | 2019.08.18 |