Tailwind CSS
Tailwind CSS는 클래스 기반의 CSS 프레임워크로, HTML 파일, JavaScript 컴포넌트 및 기타 템플릿 요소에 클래스를 적용하여 스타일을 지정합니다.
이후 빌드 과정을 통해 사용된 클래스들을 기반으로 최적화된 CSS 를 생성하여 재사용 가능하고 일관된 디자인을 쉽게 구현할 수 있습니다.
설치
// tailwindcss 설치
npm install -D tailwindcss
// tailwind.config.js 파일 프로젝트의 루트 디렉토리에 생성
npx tailwindcss init
config 파일 설정
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// tailwind.config.js 파일의 모든 템플릿 파일에 대한 경로를 추가합니다.
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
기본 CSS 파일 생성
@tailwind
지시문을 기본 CSS 파일에 추가합니다.
// src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
빌드 과정
// -i <file>: 빌드할 css 파일 경로
// -o <file>: 빌드후 저장될 css 파일 경로
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
사용 예시
<h1 class="text-3xl font-bold underline"> Hello world! </h1>
editor setting
Visual Studio Code용 "Tailwind CSS IntelliSense" 라는 공식 확장 프로그램이 존재하며 아래와 같은 기능 제공
- Autocomplete
- Linting
- Hover Previews
- Syntax Highlighting
Prettier 를 통한 자동 클래스 정렬 기능
우리는 권장 클래스 순서에 따라 클래스를 자동으로 정렬하는 Tailwind CSS 용 공식 Prettier 플러그인이 존재합니다.
정렬 방법 : https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted
플러그인 git 링크 : https://github.com/tailwindlabs/prettier-plugin-tailwindcss
Browser Support
Vendor Prefixes 자동 지원 필요한 경우 Autoprefixer 설치
참고
'Tailwind CSS' 카테고리의 다른 글
6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수 (0) | 2024.05.04 |
---|---|
5. Tailwind CSS 다크모드 적용 사용자 정의 스타일 (0) | 2024.04.30 |
4. Tailwind CSS 반응형 디자인 (0) | 2024.04.29 |
3. Tailwind CSS 의사 클래스(Pesudo classes), 의사 요소(Pesudo elements) (0) | 2024.04.28 |
2. Tailwind CSS 이해와 의의 (0) | 2024.04.28 |