TailwindCSS - 시작하기

TailwindCSS

 

✅ Setup

---

설치

npm i -D tailwindcss postcss autoprefixer

 

설정

npx tailwindcss init -p

-p는 --postcss의 줄임말로,
postcss.config.js 파일을 함께 생성해주는 옵션

(TailwindCSS는 PostCSS 기반이기 때문에 필수다.)

 

✅ tailwind.config.js

---

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "media", // class
  plugins: [require("@tailwindcss/forms")],
};

tailwind.config.js

 

✅ TailwindCSS 클래스 자동 정렬 플러그인

---

설치

npm i -D prettier prettier-plugin-tailwindcss

 

설정

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

.prettierrc

 

✅ Tailwind CSS IntelliSense

---

className 자동 완성 extension

 

✅ Tailwind styled-components

---

설치

npm i tailwind-styled-components

 

사용 예시

import tw from 'tailwind-styled-components'

const Button = tw.button`
  bg-blue-500 text-white font-bold py-2 px-4 rounded
`

export default function App() {
  return <Button>Click me</Button>
}

tailwind-styled-components는 Tailwind 클래스 유틸리티를 styled-components처럼 사용하게 해주는 경량 도구