Tailwind CSS 사용법

 

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

1) Install
npm i -D tailwindcss
npx tailwindcss init


2)tailwind.config.ts
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], 
  theme: {
    extend: {},
  },
  plugins: [],
}


3) 제일 상위 css파일(index.css)에 추가하기
@tailwind base;
@tailwind components;
@tailwind utilities;


4) 사용
 <h1 className="text-3xl">
<button className="bg-blue-500 rounded-xl px-2">

-하고 ctrl이랑 space누르면 사용 할 수 있는 옵션들이 나옴


+) 테일윈드 익스텐션 설치하면 유용
Tailwind CSS IntelliSense