안녕하세요! 오늘은 개발자들의 마음을 사로잡는 CSS 프레임워크, Tailwind CSS 를 VS Code에서 설치하는 방법에 대해 알아보겠습니다. Tailwind CSS는 유틸리티 우선 접근 방식을 통해 빠르고 효율적인 웹 디자인을 가능하게 해주는데요, 그 과정을 단계별로 함께 살펴보도록 하겠습니다.
1. Node.js와 NPM 설치하기
Tailwind CSS를 설치하기 전에 먼저 Node.js 와 NPM (Node Package Manager)을 설치해야 합니다. 이는 Tailwind CSS가 JavaScript 패키지로서 NPM을 통해 관리되기 때문입니다.
Node.js를 설치하면 NPM도 자동으로 설치됩니다. 아래의 링크를 참고하여 다운로드 및 설치를 진행해주세요.
2. VS Code에서 프로젝트 폴더 생성
이제 VS Code를 열고 새로운 프로젝트 폴더를 생성합니다. 폴더를 생성한 후 VS Code에서 해당 폴더를 열어주세요.
3. NPM 초기화하기
프로젝트 폴더에서 터미널을 열고 아래 명령어를 입력하여 NPM 초기화를 진행합니다.
npm init -y이 명령어를 입력하면 package.json 파일이 생성됩니다. 이 파일은 프로젝트에 필요한 패키지와 메타데이터를 관리하는 데 사용됩니다.
4. Tailwind CSS 설치하기
NPM 초기화가 완료되었다면 Tailwind CSS를 설치할 차례입니다. 아래의 명령어를 입력하여 Tailwind CSS를 설치하세요.
npm install -D tailwindcss5. Tailwind CSS 설정 파일 생성하기
Tailwind CSS가 설치된 후, Tailwind의 설정 파일을 생성합니다. 아래의 명령어를 입력하여 기본 설정 파일을 생성합니다.
npx tailwindcss init이 명령어를 실행하면 tailwind.config.js 파일이 생성됩니다. 이 파일에서는 Tailwind CSS의 기본 설정을 수정할 수 있습니다.
6. CSS 파일에 Tailwind CSS 추가하기
이제 Tailwind CSS를 사용할 CSS 파일을 생성합니다. 예를 들어 styles.css 라는 이름의 CSS 파일을 생성합니다. 그런 다음 아래의 Tailwind CSS 디렉티브를 추가합니다.
@tailwind base;\n@tailwind components;\n@tailwind utilities;7. Tailwind CSS 빌드하기
Tailwind CSS를 사용하기 위해서는 빌드를 진행해야 합니다. 아래의 명령어를 입력하면 Tailwind CSS가 빌드되어 결과물이 생성됩니다.
npx tailwindcss -i ./styles.css -o ./output.css --watch이 명령어를 통해 output.css 라는 파일이 생성되며, 이 파일을 HTML 문서에 링크해주면 Tailwind CSS를 사용할 수 있습니다.
8. Tailwind CSS 사용하기
마지막으로 HTML 파일을 생성하고 Tailwind CSS를 적용해보겠습니다. 아래와 같이 HTML 파일을 작성해 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
<title>Tailwind CSS Example</title>
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello, Tailwind CSS!</h1>
</body>
</html>축하합니다! 이제 Tailwind CSS를 성공적으로 설치하고 사용할 수 있게 되었습니다. Tailwind CSS를 활용한 다양한 디자인을 시도해보세요. 도움을 주신다면 아래의 '공감' 버튼과 '하트' 버튼을 눌러주시면 감사하겠습니다!
2025.04.20 - [IT/React] - Visual Studio Code에서 React 플러그인 설정하기
Visual Studio Code에서 React 플러그인 설정하기
리액트를 사용하여 개발을 시작해보세요! 리액트 플러그인을 Visual Studio Code에 설정하는 방법을 안내합니다.1. Visual Studio Code 설치하기Visual Studio Code(이하 VSCode)는 Microsoft에서 제공하는 인기 있는
web-inf.tistory.com
2025.04.19 - [IT/React] - 리액트 환경 설정 가이드: Node.js 설치부터 프로젝트 생성까지
리액트 환경 설정 가이드: Node.js 설치부터 프로젝트 생성까지
리액트를 시작하는 데 필요한 환경 설정을 알아보겠습니다. 이 글에서는 Node.js 설치부터 리액트 프로젝트를 생성하는 과정까지 세부적으로 설명할 것입니다. 마치 요리 레시피를 따라 하듯이,
web-inf.tistory.com
'IT > React' 카테고리의 다른 글
| Visual Studio Code에서 React 플러그인 설정하기 (0) | 2025.04.20 |
|---|---|
| 리액트 환경 설정 가이드: Node.js 설치부터 프로젝트 생성까지 (1) | 2025.04.19 |
