Tailwind CSS home page
  1. 설치
  2. Rspack으로 Tailwind CSS 설치하기

  1. 프로젝트 생성

    아직 설정하지 않았다면 새로운 Rspack 프로젝트를 생성하세요. 가장 일반적인 방법은 Rspack CLI 를 사용하는 것입니다.

    터미널
    npm create rspack@latest

  2. Tailwind CSS 설치

    tailwindcss와 그 의존성을 설치한 후, tailwind.config.js와 postcss.config.js 파일을 생성하세요.

    터미널
    npm install -D tailwindcss postcss postcss-loader autoprefixernpx tailwindcss init -p

  3. PostCSS 지원 활성화

    rspack.config.js 파일에서 PostCSS 로더를 활성화하세요. 자세한 내용은 문서 를 참고하세요.

    rspack.config.js
    module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["postcss-loader"],
        type: "css",
      },
  // ...

  4. 템플릿 경로 설정

    tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

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

  5. CSS에 Tailwind 지시문 추가

    Tailwind의 각 레이어에 대한 @tailwind 지시문을 ./src/index.css 파일에 추가하세요.

    index.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. 빌드 프로세스 시작

    npm run dev로 빌드 프로세스를 실행하세요.

    터미널
    npm run dev

  7. 프로젝트에서 Tailwind 사용 시작

    Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.

    App.jsx
    export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}