Tailwind 설치 정리(V3.4.17 기준)
#Web/CSS/Tailwind
Tailwind CSS 설치 방법
Play CDN을 사용하여 설치
HTML <head> 태그에 CDN 스크립트 태그 추가
<script src="<https://cdn.tailwindcss.com>"></script>
이 외에도, CLI, Vite, PostCSS를 이용하여 설치하는 방법이 있습니다. 자세한 내용은 Tailwind CSS 공식 문서를 참고하시면 됩니다.
Tailwind CSS 커스터마이징
HTML <head> 태그에 tailwind.config 객체를 추가하여, 테일윈드가 기본적으로 제공하는 설정(ex 색상, 폰트 크기…)을 커스터마이징 할 수 있다.
ex) clifford 색상을 추가하는 예시
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
사용자 정의 CSS 추가
HTML 내에서 type="text/tailwindcss"를 사용하여 유틸리티 기능을 사용한 사용자 정의 CSS를 추가할 수 있다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="<https://cdn.tailwindcss.com>"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<!-- Tailwind CSS custom utility 적용 -->
</div>
</body>
</html>
Tailwind CSS 플러그인 활성화 방법
HTML <head> 태그에 플러그인 CDN 스크립트 태그 추가
<script src="<https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries>"></script>
Tailwind CSS 공식 플러그인으로는 Typography, Forms, Aspect Ratio, Container Queries 등이 존재한다.
참고)
글을 작성하는 시점인 2025년 2월 현재, Tailwind CSS v4.0이 릴리즈되었고, 일부 플러그인(ex. 컨테이너 쿼리)의 기능이 Tailwind CSS 기본 코어에 포함되었습니다.
Tailwind CSS IntelliSense
Tailwind CSS의 유틸리티 클래스 자동 완성과 문법 오류 감지 기능을 제공하는 확장 프로그램이다. VSCode Extension에서 설치 가능하다. (Tailwind v4.0으로 넘어오면서 IntelliSense에 오류가 많아 필자는 당분간 3.4.17 버전을 사용할 예정이다.)
또한, 반드시 템플릿 파일의 경로를 수동으로 설정해줘야 한다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
참고) V4.0부터는 자동으로 컨텐츠를 감지하는 기능이 도입되어 템플릿 파일 경로를 지정해주지 않아도 Tailwind CSS가 적용된다고 한다.
vscode에서 Tailwind CSS IntelliSense 자동완성 기능이 적용되지 않는 분은 vscode의 settings.json에 다음 내용을 추가해보세요.
"editor.quickSuggestions": {
"strings": true
},
"css.validate": false,
"editor.inlineSuggest.enabled": true
"files.associations": {
"*html": "html",
"*.css": "tailwindcss"
},
Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복
'WEB > CSS' 카테고리의 다른 글
| Tailwind - Layout(Container, Flexbox, Grid, Position) (0) | 2025.02.13 |
|---|---|
| Tailwind - Core(Utility-First CSS, State) (0) | 2025.02.13 |
| Tailwind - 간격 조절, Sizing (0) | 2025.02.13 |
| Tailwind - 컬러 및 배경, 보더 처리 (0) | 2025.02.13 |
| Tailwind - Tyography 스타일링 (0) | 2025.02.13 |