[CSS] Tailwind CSS(1)

백세희·2025년 3월 2일

🤚들어 가기 전
이 css 를 들어 본 기억은 오래 전 부터인데요,
오늘부터 조금씩 빠르게 공부해 보려고 합니다.

일단, '이 CSS 이름이 뭐야?' 싶었습니다.
발음이 너무 어려워 보이잖아요 ㅎㅎ
테일윈드 라고 부르네요.

공식 사이트는 아래의 url입니다🔽
https://tailwindcss.com/

Tailwind CSS의 특징

Rapidly build modern websites without ever leaving your HTML.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
출처: 공식사이트, https://tailwindcss.com/

왜 사용해야 하는가?

장점

https://reveur1996.tistory.com/140 ,꿈꾸는 개발자
위의 포스팅 글에서 설명이 자세히 되어있네요~ 읽어보시길 추천합니다:)

Tailwind CSS 설치

공식문서를 보면 설치 방법이 나와있다.
나는 Play CDN을 사용할 것이다.

스크립트 태그만 포함하면 됩니다~

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

Tailwind CSS IntelliSense 설치

1번째 방법

자동완성 기능을 위해서 설치

1. ctrl + shift + p 누른 뒤,
Preferences: Open User Settings(JSON) 선택

2.코드 추가

"files.associations": {
    "*.html": "html",
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  }

그럼에도, 자동완성이 안 되었다.
아래 내용을 통해 알 수 있었다.
tailwind.config.js 파일을 생성해서 해결했습니다~

https://newstroyblog.tistory.com/497, 최류현의 컴퓨터 정보공간 에서 참고

2 번째 방법

tailwind.config.js에 코드 추가

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

tailwind CSS 공식문서 참고, https://v3.tailwindcss.com/docs/installation
v4 페이지의 내용은 아님 주의

백세희

프론트엔드

이전 포스트

에뮬레이터 보고싶어~

다음 포스트

[CSS] Tailwind CSS(1)

Tailwind CSS의 특징

왜 사용해야 하는가?

장점

Tailwind CSS 설치

Tailwind CSS IntelliSense 설치

1번째 방법

2 번째 방법

에뮬레이터 보고싶어~

React DayPicker + tailwindCSS

0개의 댓글