converting-css-to-tailwind

사용 방법

설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.

npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind

시작 전 확인

설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.

원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

Converting CSS to Tailwind

Migrate plain CSS files to Tailwind utility classes applied directly in markup.

Workflow

Read the CSS file and inventory every rule
Find the corresponding markup (HTML, JSX, TSX, Vue, Svelte) that references each selector
Convert each rule using the mapping below
Delete the CSS rule once all its properties are expressed as utilities
Remove the CSS file (or import) once it's empty
Verify the page looks identical — check for visual regressions

Conversion Reference

Layout & Box Model

CSS	Tailwind
`display: flex`	`flex`
`display: grid`	`grid`
`display: none`	`hidden`
`position: relative`	`relative`
`position: absolute`	`absolute`
`justify-content: center`	`justify-center`
`align-items: center`	`items-center`
`gap: 16px`	`gap-4`
`width: 100%`	`w-full`
`max-width: 768px`	`max-w-3xl`
`margin: 0 auto`	`mx-auto`
`padding: 16px`	`p-4`
`overflow: hidden`	`overflow-hidden`

Typography

CSS	Tailwind
`font-size: 14px`	`text-sm`
`font-weight: 700`	`font-bold`
`line-height: 1.5`	`leading-normal`
`text-align: center`	`text-center`
`text-transform: uppercase`	`uppercase`
`color: #333`	`text-[#333]` or a theme color
`letter-spacing: 0.05em`	`tracking-wide`

Backgrounds & Borders

CSS	Tailwind
`background-color: #f5f5f5`	`bg-[#f5f5f5]` or `bg-neutral-100`
`border: 1px solid #e5e7eb`	`border border-gray-200`
`border-radius: 8px`	`rounded-lg`
`box-shadow: 0 1px 3px ...`	`shadow-sm`

Responsive — Media Queries

css

@media (min-width: 768px) { .card { flex-direction: row; } }

→ <div class="flex-col md:flex-row">

Map breakpoints: sm: (640), md: (768), lg: (1024), xl: (1280), 2xl: (1536)

Pseudo-classes & States

css

.btn:hover { background-color: #1d4ed8; }

→ <button class="hover:bg-blue-700">

Prefixes: hover:, focus:, active:, disabled:, first:, last:, odd:, even:, group-hover:, peer-checked:

Animations & Transitions

css

transition: all 0.2s ease-in-out;

→ transition-all duration-200 ease-in-out

css

@keyframes spin { ... }
animation: spin 1s linear infinite;

→ animate-spin (built-in) or define in tailwind.config

Custom Properties / Arbitrary Values

For anything without a direct utility, use arbitrary values:

w-[calc(100%-2rem)]
grid-cols-[200px_1fr_1fr]
text-[clamp(1rem,2vw,1.5rem)]

Handling Remaining CSS

Some things can't be expressed purely as utilities:

Complex selectors (.parent > .child + .sibling) — restructure the markup or use @apply as a last resort
`@font-face` — keep in a global CSS file or globals.css
Complex `@keyframes` — define in tailwind.config.ts under theme.extend.keyframes
CSS variables — migrate to Tailwind theme values in tailwind.config.ts

Rules

Prefer semantic Tailwind classes (bg-primary) over arbitrary hex values when a theme exists
Don't use @apply to recreate the same CSS you're migrating away from — that defeats the purpose
Group related utilities logically: layout → spacing → typography → colors → effects
If a component has 10+ utilities, consider extracting a reusable component rather than a CSS class