https://tailwindcss.com/docs/installation
1. Tailwind CLI를 사용하여 환경 구축
웹사이트 개발에 사용할 간단한 환경을 구축하는 데 중점을 둡니다. 다음은 단계별로 설명된 내용입니다:
프로젝트 폴더 생성: 먼저, "simple-tailwind-starter"라는 이름의 프로젝트 폴더를 만듭니다. 이 폴더는 다른 프로젝트를 시작할 때 복사하여 사용할 수 있는 기본 환경이 됩니다.
VS Code에서 폴더 열기: 폴더를 VS Code에서 열고 터미널을 실행합니다.
Node.js 설치 및 초기화: Node.js가 설치되어 있어야 하며, 터미널에서 다음 명령어를 입력합니다:
npm init -y
이 명령어는 기본 package.json 파일을 생성합니다.
Tailwind CSS 설치:
npm install -D tailwindcss
Tailwind CSS를 개발 의존성으로 설치합니다.
5.Tailwind 설정 파일 생성:
npx tailwindcss init
이 명령어는 기본 tailwind.config.js 파일을 생성합니다.
이 파일에서 content 배열을 수정하여 현재 루트 폴더에서 HTML 파일을 찾도록 설정합니다:
content: ["./*.html"],
6. Input CSS 파일 생성: 루트 폴더에 input.css 파일을 만들고, 다음 내용을 추가합니다:
@tailwind base; @tailwind components; @tailwind utilities;
PostCSS 확장 프로그램 설치: 만약 파일에서 에러 표시가 나타나면 PostCSS 확장 프로그램을 설치하여 해결합니다.
빌드 및 Watch 스크립트 설정: package.json 파일의 scripts 섹션에 다음 내용을 추가합니다:
"scripts": {
"build": "tailwindcss -i ./input.css -o ./css/style.css",
"watch": "tailwindcss -i ./input.css -o ./css/style.css --watch"
}
이제 npm run build를 실행하면 css/style.css 파일이 생성됩니다.
HTML 파일 생성: 루트 폴더에 index.html 파일을 생성하고, Tailwind CSS를 포함하도록 설정합니다:
<link href="css/style.css" rel="stylesheet">
HTML 파일에 Tailwind 클래스를 사용해 텍스트 크기나 배경색을 테스트할 수 있습니다.
실시간 서버 실행: VS Code에서 Live Server를 사용하여 HTML 파일을 실시간으로 확인합니다. Tailwind 클래스가 올바르게 적용되었는지 확인할 수 있습니다.
이로써 Tailwind CSS 환경이 완성됩니다. 이 환경을 복사해 다양한 프로젝트에 쉽게 활용할 수 있습니다.
2. Tailwind 디렉티브 사용
해당 내용은 Tailwind CSS 프로젝트를 시작할 때의 기본 설정과 Tailwind의 주요 기능에 대한 설명입니다. 다음은 주요 포인트입니다:
프로젝트 시작 전: Tailwind 스타터 프로젝트를 복제하여 사용해야 합니다. 이로 인해 원본 스타터를 계속 깨끗하게 유지할 수 있습니다.
환경 설정: 프로젝트를 복제한 후, npm install 없이 바로 npm run watch를 통해 Tailwind를 실행할 수 있습니다.
Tailwind의 디렉티브 사용:
- Tailwind는 @tailwind 디렉티브를 통해 기본 스타일, 컴포넌트, 유틸리티, 그리고 변형 스타일을 CSS에 포함시킵니다.
- @layer 디렉티브를 사용해 Tailwind의 기본 계층(base), 컴포넌트 계층(components), 유틸리티 계층(utilities)을 커스터마이징할 수 있습니다.
커스텀 클래스 생성:
- Tailwind의 많은 HTML 클래스 사용을 줄이기 위해 커스텀 클래스를 정의할 수 있습니다.
- 예를 들어, 버튼 스타일을 커스텀 클래스로 정의한 후, 이 클래스를 HTML에서 재사용할 수 있습니다.
Tailwind의 함수 사용:
- theme 함수는 Tailwind 설정값을 가져올 수 있습니다. 예를 들어, 사용자 정의 간격(spacing) 값을 CSS에서 참조할 수 있습니다.
- screen 함수는 반응형 디자인을 구현할 때 브레이크포인트를 지정하는 데 유용합니다.
ex)
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base{
h1{
@apply text-3xl font-bold text-center;
}
h2{
@apply text-xl;
}
}
@layer components{
.btn-blue{
@apply bg-blue-500 py-2 px-4 rounded-xl font-bold
text-white hover:bg-blue-700;
}
}
.content-area{
@apply bg-green-200;
height :them('spacing.128');
}
@media screen(xl){
body{
@apply bg-black text-white;
}
}
3.Webpack 및 PostCSS 환경
1. Webpack의 기본 개념
Webpack은 여러 JavaScript 파일을 하나로 번들링해주는 도구입니다. 예를 들어, 프로젝트에서 utils.js, api.js, app.js라는 세 가지 파일을 사용한다고 가정해 봅시다.
이 세 파일이 서로 종속적일 때, Webpack은 이들을 하나의 파일로 묶어 bundle.js라는 단일 파일로 만들어줍니다. 이 파일만 웹 브라우저에서 로드하면 필요한 모든 코드가 포함되게 됩니다.
// utils.js
export function add(a, b) {
return a + b;
}
// api.js
export function fetchData() {
return fetch('/api/data').then(response => response.json());
}
// app.js
import { add } from './utils';
import { fetchData } from './api';
console.log(add(2, 3)); // 5
fetchData().then(data => console.log(data));
Webpack을 사용하지 않으면 각각의 파일을 HTML에서 개별적으로 불러와야 하지만, Webpack은 이를 하나로 묶어 bundle.js로 처리합니다.
2. PostCSS와 Tailwind 설정
PostCSS는 Tailwind CSS와 같은 스타일 도구를 효율적으로 처리할 수 있게 해주는 도구입니다. PostCSS는 다양한 플러그인을 지원하며, Tailwind CSS도 그 중 하나입니다. 예를 들어, style.css 파일에 Tailwind의 기본 디렉티브를 추가합니다.
/* src/style.css */ @tailwind base; @tailwind components; @tailwind utilities;
이제 이 파일을 Webpack이 처리하여 모든 Tailwind 스타일이 번들된 최종 CSS 파일을 만들어 줍니다.
3. 프로젝트 구조 설정
Webpack 설정 파일(webpack.config.js)에서 진입점(entry)과 출력(output) 파일을 지정합니다. 예를 들어, src/index.js가 진입점이라면, 이를 dist/bundle.js라는 파일로 출력합니다.
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
};
위 코드에서 test: /\.css$/는 모든 CSS 파일을 대상으로 스타일, CSS, PostCSS 로더를 적용하겠다는 의미입니다.
4. Webpack Dev Server 사용
Webpack Dev Server는 개발 중 자동으로 빌드 과정을 처리하고, 변경 사항이 있을 때 자동으로 브라우저를 새로고침해 줍니다. 예를 들어, npm run dev 명령어를 실행하면 로컬 서버가 열리고 코드 변경 시 실시간으로 반영됩니다.
// package.json
"scripts": {
"dev": "webpack serve --open --hot"
}
이 설정으로 로컬 서버를 띄우면, 변경사항이 발생할 때마다 자동으로 새로고침됩니다.
5. Tailwind CSS 적용 예시
src/style.css에 Tailwind CSS를 설정한 후, HTML 파일에서 Tailwind 클래스를 적용해 봅니다.
<!-- dist/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webpack Tailwind Starter</title> </head> <body class="bg-gray-200"> <h1 class="text-5xl font-bold text-center text-blue-500">Hello, Tailwind with Webpack!</h1> <script src="./bundle.js"></script> </body> </html>
위와 같이 Tailwind 클래스를 HTML에 추가하면, Webpack이 스타일을 포함한 최종 번들 파일을 처리해 줍니다.
전체 과정 요약
- Webpack을 이용해 여러 JavaScript 파일과 모듈을 하나의 번들로 묶어 처리.
- PostCSS와 Tailwind CSS를 함께 설정하여 CSS 처리.
- Webpack Dev Server로 핫 리로딩을 지원해 개발 생산성 향상.
- Tailwind CSS 스타일을 HTML에 적용해 유연한 디자인 가능.
댓글 ( 0)
댓글 남기기