Tailwind CSS

• 회사 생활을 하면서 제 동료 프론트엔드 개발자 분들은 빠르게 CSS를 적용하며 배포하기 위해 Tawilwind CSS를 많이 사용하는 것을 봤습니다.
• 디자인도 깔끔하고, MVP 및 개인 프로젝트 웹을 만드는데 적합해 보여 사용해보려합니다.
• 최근 v4 가 나온 것 같은데, 현 시점에서는 v3에 정보가 많아 v3를 먼저 사용해볼 계획입니다.

Install

• Install Page

npm install -D tailwindcss@3 postcss autoprefixer

Create configuration files

• create configuration files
  

npx tailwindcss init --ts -p

import type { Config } from 'tailwindcss'

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

• install docs에서의 tailwind.config.js 대신 위 내용의 tailwind.config.ts 을 사용합니다.

src/index.css

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

• src/index.css 경로에 위 내용을 넣어줍니다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

• main.tsx에 index.css import를 명시합니다.

VSCode setup

• Tailwind CSS IntelliSense
• Autocomplete, Linting, Hover previews, Syntax highlighting 기능을 지원해 빠른 개발하는데 큰 도움을 줄 것으로 보입니다.

• VSCode에서 index.css 에 문법이 인식되지 않을 수 있어 PostCSS extension을 설치합니다.