[Tailwindcss] 테일윈드 설치 및 적용

개발 ·공부/WEB

[Tailwindcss] 테일윈드 설치 및 적용

LUNA Dev 📁 2023. 1. 12. 01:52

728x90

서비스하나를 만들어보기 위해 부트스트랩이 아닌 Tailwincss 사용해 만드려고 하는데 설치 및 적용 방법을 까먹지 않기 위해 작성

1. Tailwind 설치

- Tailwind 설치 할 폴더에 커맨드 창이나 vscode 커맨드창에 아래코드 작성

npm install -D tailwindcss
npx tailwindcss init

2. 템플릿 경로 구성

- tailwind.config.js 에 아래 코드 작성

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. tailwind 레이어를 추가하기 위한 폴더 생성 및 css 파일 생성

- 나는 src/css/tailwind.css 파일을 생성함

- tailwind.css 파일에 아래와 같이 작성

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

4. Tailwind CLI 빌드

- 3번에 생성한 파일 경로 확인하고 작성

- 아래 명령어 실행시 빌드가 되고 /dist/ouput.css 폴더와 파일이 생성

npx tailwindcss -i ./src/css/tailwind.css -o ./dist/output.css --watch

5. HTML에서 Tailwind 사용

- src/index.html 파일 생성해서 tailwind를 빌드한 /dist/output.css 경로 link 연결

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

결과물 :

출처

Installation - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

tailwindcss.com

728x90

저작자표시 비영리