5. Tailwind CSS
이 문서는 Tailwind CSS를 사용하여 프로젝트에 리셋 CSS를 적용하는 방법에 대한 설명입니다. ※ X2BEE FO/BO는 Tailwind CSS v4(4.1.16)를 사용합니다. v4부터는 globals.css 에 @import "tailwindcss"; 한 줄이면 되고, tailwind.config 파일과 autoprefixer 가 필요 없으며(@tailwindcss/postcss 가 vendor prefix 를 처리), 테마는 globals.css 의 @theme 블록에서 설정합니다. 실제 FO globals 경로는 src/assets/styles/page/globals.css 입니다. 아래 설치 절차는 구 v3 기준이므로 참고용입니다.
Reset CSS
src/app/layout.tsx에 다음 한 줄을 추가합니다.
import '@/app/ui/globals.css';파일을 생성하고
src/app/ui/globals.css에 다음 3줄을 입력합니다.
@import "tailwindcss";
/* Tailwind v4: 위 한 줄로 base·components·utilities 포함 */
/* (v3 의 @tailwind 지시문은 v4 에서 불필요) */위 설정을 추가하면 처음에 VS Code에서 warning이 뜰 수 있습니다. 이 경우, VS Code에서 "PostCSS Language Support" 확장(extension)을 설치하면 warning이 사라집니다.
Install
참조: https://tailwindcss.com/docs/guides/nextjs 참조: https://nextjs.org/docs/app/building-your-application/styling/tailwind-css
다음은 설치와 초기 설정 순서입니다:
tailwind.config 파일을 TypeScript로 변경하고 내용 교체
생성된 tailwind.config.js의 이름을 .ts로 바꿔도 됩니다 (예: tailwind.config.ts). 파일 내용을 다음 코드로 대체하세요.
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
};
export default config;
VS Code 추가 extension
Tailwind CSS IntelliSense: 코딩 시 utility class 목록과 자동완성 기능을 제공합니다.
마지막 업데이트