Rspack에서 Tailwind CSS 설치하기

Rspack 프로젝트에서 Tailwind CSS 설정하기.

프로젝트 생성

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

터미널

npm create rspack@latest

Tailwind CSS 설치

@tailwindcss/postcss와 그에 필요한 의존성을 설치하세요.

터미널

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

PostCSS 지원 활성화

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

rspack.config.ts

export default defineConfig({  // ...  module: {    rules: [      {        test: /\.css$/,        use: ["postcss-loader"],        type: "css",      },      // ...    ],  },}

PostCSS 플러그인 설정

프로젝트 루트에 postcss.config.mjs 파일을 생성하고 PostCSS 설정에 @tailwindcss/postcss 플러그인을 추가하세요.

postcss.config.mjs

export default {  plugins: {    "@tailwindcss/postcss": {},  },};

Tailwind CSS 임포트

./src/index.css에 Tailwind CSS를 임포트하는 @import를 추가하세요.

index.css

@import "tailwindcss";

빌드 프로세스 시작

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

터미널

npm run dev

프로젝트에서 Tailwind 사용 시작

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

App.jsx

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