Tailwind CSS 시작하기
Tailwind CSS 시작하기
Tailwind CSS는 모든 HTML 파일, JavaScript 컴포넌트, 그 외 다른 템플릿에서 클래스 이름을 스캔한 뒤, 해당하는 스타일을 생성해 정적 CSS 파일로 만들어주는 방식으로 동작해요. 빠르고, 유연하고, 안정적이며 런타임이 전혀 없어요(zero-runtime).
출처: 문서
본문
설치 (Installation)
- Using Vite — Vite를 사용하는 방법
- Using PostCSS — PostCSS를 사용하는 방법
- Tailwind CLI — Tailwind CLI를 사용하는 방법
- Framework Guides — 프레임워크별 안내
- Play CDN — Play CDN을 사용하는 방법
프레임워크 가이드 (Framework Guides)
인기 있는 여러 환경에서 Tailwind CSS를 설치하는데 권장하는 방법을 다루는 프레임워크별 안내서들이에요.
- Next.js — 뛰어난 개발자 경험을 제공하는 풀 스택 React 프레임워크.
- Laravel — 표현력이 뛰어나고 우아한 문법을 가진 PHP 웹 애플리케이션 프레임워크.
- Nuxt — 유니버설 애플리케이션을 만들기 위한 직관적인 Vue 프레임워크.
- SolidJS — 단순하고 성능 좋으며 반응형인 사용자 인터페이스를 만들기 위한 도구.
- SvelteKit — Svelte.js로 모든 크기의 앱을 만드는 가장 빠른 방법.
- Gatsby — React와 GraphQL로 정적 사이트를 만드는 프레임워크.
- Angular — 모바일 및 데스크톱 웹 애플리케이션을 만들기 위한 플랫폼.
- Ruby on Rails — 멋진 웹 앱을 만드는 데 필요한 모든 도구를 갖춘 풀 스택 프레임워크.
- React Router — 어디서나 배포할 수 있는 표준 중심의 라우터.
- TanStack Start — React와 Solid를 위한 TanStack Router 기반의 풀 스택 프레임워크.
- Phoenix — Elixir로 풍부하고 상호작용적인 애플리케이션을 만드는 프레임워크.
- Parcel — 웹을 위한 제로 설정(zero-configuration) 빌드 도구.
- Symfony — 웹사이트와 웹 애플리케이션을 만드는 PHP 프레임워크.
- Meteor — 크로스 플랫폼 앱을 개발하기 위한 풀 스택 JavaScript 프레임워크.
- AdonisJS — Node.js를 위한 완전한 기능을 갖춘 웹 프레임워크.
- Ember.js — 야심 찬 웹 개발자를 위한 JavaScript 프레임워크.
- Astro — 속도를 위해 설계된 올인원 웹 프레임워크.
- Qwik — 노력 없이 즉시 상호작용하는 웹 앱을 만드는 도구.
- Rspack — Rust 기반의 빠른 웹 번들러.
선택한 프레임워크가 보이지 않나요? 그렇다면 Tailwind CLI, Vite 플러그인, 또는 PostCSS 플러그인을 대신 사용해 보세요.