CSS 프레임워크·스타일 도구
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
Tailwind CSS Tailwind CSS
단일 목적 유틸리티 클래스를 조합해 스타일을 구성하는 CSS 프레임워크.
맞춤 디자인 시스템·반응형 웹 UI.
버전에 따라 설정·빌드 방식이 다르다. 설치 버전의 공식 가이드를 따른다.
Bootstrap Bootstrap
반응형 그리드와 스타일된 UI 컴포넌트를 제공하는 웹 툴킷.
표준적인 관리 화면·프로토타입.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Bulma Bulma
CSS 중심으로 레이아웃과 컴포넌트 스타일을 제공하는 프레임워크.
자바스크립트 동작을 별도로 구성할 웹 UI.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Foundation Foundation
반응형 레이아웃과 웹 컴포넌트를 제공하는 프런트엔드 프레임워크.
반응형 사이트·기업 웹 UI.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Pico CSS Pico CSS
시맨틱 HTML 요소에 간결한 기본 스타일을 제공하는 CSS 프레임워크.
소규모 웹 도구·간단한 폼·문서.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
UIkit UIkit
레이아웃·컴포넌트·상호작용을 묶어 제공하는 웹 UI 툴킷.
빠른 반응형 사이트 구축.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
daisyUI daisyUI
Tailwind 기반으로 의미 있는 컴포넌트 클래스와 테마를 제공하는 도구.
Tailwind 프로젝트의 버튼·카드·폼.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Flowbite Flowbite
Tailwind 스타일의 컴포넌트와 상호작용 구현을 제공하는 도구군.
관리 화면·랜딩 페이지 구성.
코어·프레임워크 어댑터·유료 자산의 범위를 구분한다.
UnoCSS UnoCSS
규칙과 프리셋을 이용해 필요한 유틸리티 CSS를 생성하는 엔진.
커스텀 유틸리티 체계·빌드 통합.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Open Props Open Props
색·간격·모션 등을 CSS 사용자 정의 속성으로 제공하는 디자인 토큰 모음.
프레임워크에 덜 종속된 스타일 기반.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Sass Sass
변수·믹스인·모듈 등 확장 문법을 CSS로 컴파일하는 스타일시트 언어·도구.
큰 스타일 코드베이스·반복 패턴 정리.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Less Less
변수·믹스인 등 확장 기능을 갖춘 CSS 전처리 언어·컴파일러.
Less 기반 프로젝트의 스타일 유지보수.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
PostCSS PostCSS
플러그인으로 CSS 문법 트리를 분석·변환하는 처리 도구.
접두사·최적화·빌드 파이프라인.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Lightning CSS Lightning CSS
CSS 파싱·변환·번들링·압축을 제공하는 도구.
웹 빌드의 CSS 처리.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Autoprefixer Autoprefixer
지원 대상 브라우저 정보에 맞춰 CSS 벤더 접두사를 처리하는 플러그인.
브라우저 호환성 빌드.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
styled-components styled-components
컴포넌트와 함께 스타일을 정의하는 CSS-in-JS 라이브러리.
기존 React 스타일 구조 유지·컴포넌트 스타일링.
현재 유지보수 정책과 React·SSR 호환성을 도입 전에 확인한다.
Emotion Emotion
객체·문자열 기반 스타일 작성과 CSS 생성을 지원하는 라이브러리.
동적 스타일·React 컴포넌트.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
vanilla-extract vanilla-extract
타입 있는 스타일 정의를 빌드 시 CSS로 추출하는 도구.
정적 CSS와 타입 안전성을 함께 원하는 프로젝트.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Panda CSS Panda CSS
토큰·레시피 기반 스타일을 분석하여 CSS를 생성하는 스타일 엔진.
타입 기반 디자인 시스템.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Style Dictionary Style Dictionary
디자인 토큰을 여러 플랫폼의 스타일 파일로 변환하는 도구.
웹·모바일 공통 토큰 배포.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
CSS Frameworks & Styling Tools
Open an entry for its visual reference, comparisons and source-language text.
Tailwind CSS Tailwind CSS
A CSS framework composing styles from single-purpose utility classes.
Custom design systems and responsive web interfaces.
Configuration and build procedures differ by version. Follow the official guide for the installed version.
Bootstrap Bootstrap
A web toolkit providing a responsive grid and styled interface components.
Conventional administration screens and prototypes.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Bulma Bulma
A CSS-focused framework providing layout and component styles.
Web interfaces with separately implemented JavaScript behavior.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Foundation Foundation
A front-end framework offering responsive layouts and web components.
Responsive websites and business interfaces.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Pico CSS Pico CSS
A CSS framework giving semantic HTML concise default styling.
Small web tools, simple forms, and documentation.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
UIkit UIkit
A web interface toolkit combining layouts, components, and interactions.
Rapid responsive-site development.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
daisyUI daisyUI
A Tailwind-based tool providing semantic component classes and themes.
Buttons, cards, and forms in Tailwind projects.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Flowbite Flowbite
A family of tools providing Tailwind-styled components and interaction implementations.
Administration screens and landing pages.
Distinguish the core library, framework adapters, and paid assets.
UnoCSS UnoCSS
An engine generating needed utility CSS from rules and presets.
Custom utility systems and build integration.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Open Props Open Props
A collection of design tokens provided as CSS custom properties for color, spacing, motion, and more.
A styling foundation with less framework dependence.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Sass Sass
A stylesheet language and tooling that compile variables, mixins, modules, and other extensions into CSS.
Large stylesheet codebases and repeated patterns.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Less Less
A CSS preprocessor language and compiler offering variables, mixins, and related features.
Maintaining styles in Less-based projects.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
PostCSS PostCSS
A tool that uses plugins to analyze and transform CSS syntax trees.
Prefix handling, optimization, and build pipelines.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Lightning CSS Lightning CSS
A tool providing CSS parsing, transformation, bundling, and minification.
CSS processing in web builds.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Autoprefixer Autoprefixer
A plugin handling CSS vendor prefixes according to target-browser information.
Browser-compatibility builds.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
styled-components styled-components
A CSS-in-JS library defining styles alongside components.
Maintaining existing React styling and styling components.
Check current maintenance policy and React and SSR compatibility before adoption.
Emotion Emotion
A library supporting object- and string-based style authoring and CSS generation.
Dynamic styles and React components.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
vanilla-extract vanilla-extract
A tool extracting typed style definitions into CSS at build time.
Projects requiring static CSS and type safety.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Panda CSS Panda CSS
A styling engine analyzing token- and recipe-based definitions to generate CSS.
Type-based design systems.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Style Dictionary Style Dictionary
A tool transforming design tokens into platform-specific style files.
Distributing shared web and mobile tokens.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.