Tailwind CSS IntelliSense 익스텐션 설치

아래와 같이 키워드를 입력하면 className에 tailwind 관련된 명령어가 미리보기가 뜬다.

글로벌 스타일은 index.css 에서 확용

//index.css

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

html {
	font-size: 62.5%; /* 기본 폰트 크기를 62.5%로 설정 (1rem = 10px) */
  }

theme 는 tailwind.config.ts

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
	theme: {
		extend: {
			colors: {
				primary: '#1368E8', 
				secondary: '#FF8A00', 
			},
			keyframes: {
				dynamicWidth: {
					'0%': { width: '0%' },
					'100%': { width: 'var(--dynamic-width)' }, // CSS 변수 사용
				},
			},
			animation: {
				dynamicWidth: 'dynamicWidth 0.5s ease-out forwards',
			},
		},
	},
	plugins: [],
};

단위는 rem을 사용, 변경이 필요없는 (border관련) 속성만 px