날이갈수록 이해력이 떨어지는지 너무나도 친절하게 설명이 적혀있는 공식문서에 써져있는 그대로 진행했으나 한번에 적용할 수 없었다.
다음에 한번에 성공하기 쉽게 정리해보자.
# 공식문서
https://tailwindcss.com/docs/guides/vite
Install Tailwind CSS with Vite - Tailwind CSS
Setting up Tailwind CSS in a Vite project.
tailwindcss.com
# 그대로 따라하기
1. Vite 프로젝트를 만든다. 만드는 자세한 방법은 vite 공식문서로 넘어가서 확인해보자
$ yarn create vite my-app --template react-ts
$ cd my-app
2. tailwindcss와 관련된 패키지들을 설치한다.
$ yarn add -D tailwindcss postcss autoprefixer
3. `tailwind.config.js`와 `postcss.config.js`를 생성한다.
$ npx tailwindcss init -p
4. `tailwind.config.js`에 tailwindcss를 적용할 파일 형식을 추가한다.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
5. `src/index.css`에 `@tailwind`를 데려온다.
@tailwind base;
@tailwind components;
@tailwind utilities;
6. `index.html`에 `src/index.css`를 데려온다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Playground</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.css"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
7. 원하는 컴포넌트의 클래스네임으로 스타일을 입힌다.
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
8. 실행한다!
$ yarn dev
9. 짜잔~!
이렇게나 쉬운걸 다음엔 꼭 한번에 성공하도록 하자
'Frontend Dev 지식 모음' 카테고리의 다른 글
| Node.js의 정체를 알아보자 What is Node.js? (0) | 2023.11.22 |
|---|