[Next.js 당근마켓] Tailwind CSS 란?

🔗 테일윈드 공식 문서
https://tailwindcss.com/

Tailwind CSS

부트스트랩과 비슷하게 사용하는 CSS 프레임워크입니다. ex) m-1, flex 와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식이며

HTML코드 내에서 사용할 수 있습니다.

Tailwind CSS 설치

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

tailwind.config 파일이 생성됩니다.

Tailwind CSS IntelliSense 확장 프로그램 설치

- 자동완성 기능 제공

- 색상 미리보기

- 중복 class나 오타를 알려줍니다.

파일 수정

저의 환경 : React + Ts

 

📄 tailwind.config.ts

theme안에 extend를 지워주세요.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
  },
  plugins: [],
};
export default config;

 

📄 globals.css 

아래와 같이 수정

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

 

Tailwind css 사용

html 태그 className에서 사용하면 됩니다.

자동완성이 뜨지 않는다면 ctrl + space 누르기!

 

자동완성과 미리 어떤 css인지 볼 수 있습니다.

마우스를 올렸는데 미리보기가 뜨지 않는다면 그건 유효하지 않은 기능입니다!

 

다양한 클래스들은 공식 문서에서 자세히 확인할 수 있습니다.

 

 

참고

Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log