tailwind css 세팅 방법
세팅 방법으로는 총 4가지가 있다.
Tailwind CLI: Tailwind CLI 도구를 이용한 설치 방법으로 가장 빠르고 간결하다.input.css를 지정하면 그에 따른output.css가 나오게 되는 간단한 원리를 가지고 있다.Using PostCSS: Webpack, Rollup, Vite, Parcel 과 같은 빌드 도구와 가장 깔끔하게 통합되는 방법이다.Framework Guides: 프레임워크 가이드를 보고 세팅하는 것이다. 공식문서에 자세하게 나와있다.Play CDN: CDN 을 이용하는 방법인데, 브라우저에서 간단하게 스크립트를 하나 추가하면 할 수 있다. 그러나 프로덕션에 권장되진 않고 개발용으로 사용하면 괜찮다.
tailwindcss 초기 세팅 방법 (Using PostCSS)
의존성 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss inittailwindcss,postcss,autoprefixer를 설치해준다.- 나는
npm이 아닌pnpm을 이용해 설치했다.
postcss.config.js 설정
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}특별히 아무것도 적지 않아도 상관은 없다.
tailwind.config.js 설정
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}tailwindcss 를 사용할 템플릿 파일이 있는 곳을 잘 가리켜주어야 한다.
main.css 설정
@tailwind base;
@tailwind components;
@tailwind utilities;CSS 에 @tailwind directives 를 잘 넣어주어야 한다.
빌드 프로세스 실행
npm run devhtml 에서 tailwindcss 사용하기
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/main.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>위와 같이 <head /> 태그에 임포트 후 사용하면 된다.
tailwind css 는 다양한 커스터마이징이 가능하다.
Tailwind CSS Customization 가이드 에 다양한 커스터마이징 셋업 방법이 나와있다.
tailwind.config.js 내부 content 프로퍼티에서 경로는 왜 필요한걸까?
이 궁금증에 대한 답은 Content Configuration 에 자세히 나와있었다. Tailwind CSS 는 모든 HTML, 자바스크립트 혹은 기타 템플릿 파일들을 스캐닝하면서 동작한다. 스캐닝이 끝난 후에는 그에 대응되는 CSS 를 만들어낸다. 필요한 CSS 를 생성하기 위해, Tailwind CSS 는 Tailwind 클래스를 포함하는 모든 파일을 알아야 한다. 이 때 입력되는 경로를 해석하는 라이브러리로 Glob pattern 을 따르는 Node.js 용 라이브러리인 Fast-glob 을 사용하고 있다.
공식 문서에는 프로퍼티 경로를 설정하는 팁이 있다.
- 너무 광범위한 경로를 설정하지 않도록 주의하자.
- css 파일은 절대 넣지 않도록 주의하자.
tailwind css 가 클래스를 감지하는 방법
tailwind css 는 단순히 정규표현식을 이용해서 클래스 이름을 파악하고 있다.
위에서 보듯, tailwind css 는 단순히 class="..." 패턴에 한정지어 클래스 이름을 살펴보는 것이 아니라, 모든 영역을 살펴본다. 왜냐하면, 자바스크립트 소스코드에도 클래스명이 들어갈 수 있기 때문이다.
tailwind css 에서 표현한 아래의 샘플 파일명은
spaghetti.js인데, tailwind css 에서 그다지 추천하지는 않는 패턴 같다.
<script>
menuButton.addEventListener('click', function () {
let classList = document.getElementById('nav').classList
classList.toggle('hidden')
classList.toggle('block')
})
</script>함께 설치하면 좋은 vscode 플러그인들
prettier-plugin-tailwindcss
- prettier-plugin-tailwindcss
- tailwind 클래스명을 정렬해준다.
설치 방법
- 아래의 의존성을 설치해주자.
npm install -D prettier prettier-plugin-tailwindcss- 아래와 같은
prettier.config.js파일을 생성해주자.
// prettier.config.js
module.exports = {
plugins: [require("prettier-plugin-tailwindcss")],
tailwindConfig: "./tailwind.config.js",
};