Tailwind CSS
Tailwind CSS๋
HTML์ ๋ ๋์ง ์๊ณ ๋น ๋ฅด๊ฒ ๋น๋ํ๋ ๋ชจ๋ ์น ์ฌ์ดํธ ์ฆ, CSS ๋ฌธ์๋ฅผ ๋ฐ๋ก ์์ฑํ์ง ์๊ณ ๋ HTML ๋ฌธ์ ๋ด์์ ์น ์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ ์ ์๋ค๋ ๊ฒ
CSS๋ ์ ํ์๋ฅผ ํตํด ์คํ์ผ๋ง์ ์ ์ฉ ํ๊ธฐ ๋๋ฌธ์ ๋งํฌ์ ๊ตฌ์กฐ์ ๋งค์ฐ ์์กดํ๋ค.
BEM(Block Element Modifier)์ ๋งํฌ์ ๊ตฌ์กฐ์ ์์กด์ฑ์ ์ค์ด๊ธฐ ์ํ ๋ฐฉ๋ฒ๋ก ์ผ๋ก, ์ ํ์๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๊ฐ ์์๋ง๋ค ํด๋์ค๋ฅผ ์ถ๊ฐํ์ฌ ์คํ์ผ์ ์ ์ฉํ๋ ๋ฐฉ์์ด๋ค.
BEM ๋ฐฉ์์ ์ ์ฉํ ํ ํด๋์ค ๋ค์ด๋ฐ์ ์ด๋ป๊ฒ ์ง์ ํ๋์ง์ ๋ฐ๋ผ ์ปจํ ์ธ (HTML)์ ์์กดํ๋ CSS vs CSS์ ์์กดํ๋ ์ปจํ ์ธ (HTML)๋ก ๊ตฌ๋ถ๋๋ค.
์ปจํ ์ธ (HTML)์ ์์กดํ๋ CSS โ ์ปจํ ์ธ ์ ๋ฐ๋ผ CSS ํด๋์ค ๋ค์ด๋ฐ์ ์ง์ ํ๋ฉด HTML์ ๋ ๋ฆฝ์ ์ด๊ฒ ๋์ง๋ง CSS๋ ์ปจํ ์ธ ์ ๋ฐ๋ผ ์คํ์ผ์ ์ง์ ํ๋ฏ๋ก ์คํ์ผ์ด ๋น์ทํ์ง๋ง ์ปจํ ์ธ ๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ ์ฌ์ฌ์ฉํ ์ ์๋ค.
CSS์ ์์กดํ๋ ์ปจํ ์ธ (HTML) โ ์ปจํ ์ธ ์ ๊ตฌ์ ๋ฐ์ง ์๊ณ UI ํจํด์ ๋ฐ๋ผ ํด๋์ค ๋ค์ด๋ฐ์ ์ง์ ํ๋ฉด CSS๋ ๋ ๋ฆฝ์ ์ด๊ฒ ๋์ด ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํด์ง์ง๋ง, HTML์ ์ด๋ค ํด๋์ค๊ฐ ์กด์ฌํ๋์ง ์์์ผ ํ๋ฏ๋ก CSS์ ์์กด์ ์ด๊ฒ ๋๋ค.
Tailwind CSS๋ ์ปจํ ์ธ ์ ๊ตฌ์ ๋ฐ์ง ์๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ CSS. ์ฆ, CSS์ ์์กด์ ์ธ HTML ๋ฐฉ์์ ์ ํํจ
์ปดํฌ๋ํธ๊ฐ ๊ตฌ์ฒด์ ์ด๊ณ ๋ณต์กํด์ง์๋ก ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ CSS๋ฅผ ์์ฑํ๊ธฐ ์ด๋ ค์์ง๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์คํ์ผ์ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ์์ ์์(์ ํธ๋ฆฌํฐ ํด๋์ค)๋ก ๊ตฌ์ฑํ๊ณ ์กฐํฉํ์ฌ ์คํ์ผ์ ๊ตฌ์ถํ๋ ๋ฐฉ์์ผ๋ก ๋ณต์ก์ฑ์ ๋ฎ์ถ๊ณ ์ผ๊ด์ฑ๊ณผ ์ฌ์ฌ์ฉ์ฑ์ ํฅ์์ํจ๋ค.
Tailwind CSS๋ ์ ํ์ ์ด๋ฉฐ ์ปค์คํ
์ด ๋ถ๊ฐ๋ฅํ๋ค๋ ์คํด
Tailwind CSS๋ ๋ฏธ๋ฆฌ ์ ์๋ ํด๋์ค๋ค์ ์ฌ์ฉํ์ฌ ๋์์ธ์ ๊ตฌ์ถํ๋ ๋ฐฉ์์ด๊ธฐ ๋๋ฌธ์, ๊ธฐ์กด์ ๋ถํธ์คํธ๋ฉ๊ณผ ๊ฐ์ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ฒ๋ผ ์ปค์คํฐ๋ง์ด์ง์ด ์ ํ์ ์ด๊ฑฐ๋ ์ด๋ ค์ธ ๊ฒ์ด๋ผ๋ ์ ์ ๊ฒฌ์ ๊ฐ์ง๊ณ ์์๋ค.
Tailwind๋ ๋์์ธ ์์คํ ์ ์ฝ๊ฒ ์์ฑํ ์ ์๋ ๋ง์ ์ต์ ๋ค๊ณผ ์ปค์คํ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ก ๋ค์ํ ์คํ์ผ์ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์๋ค.
Tailwind CSS๋ Inline Style๊ณผ ๋ค๋ฅด๋ค.
Inline style์ ์ฌ์ฉ์๊ฐ ์ด๋ค ์คํ์ผ์ ์ ํํ ์ง ์ ์ฝ์ด ์๋ค.
Tailwind CSS๋ ์ฌ์ฉ์์๊ฒ ์ง์ ๋ Utility Class๋ง์ ์ ๊ณตํจ์ผ๋ก์จ ์ ํ์ ๊ฐ์ํ๋ค. ๋ํ ๋ฐ์ํ ๋ฐ ํธ๋ฒ, ํฌ์ปค์ค ์ํ์ ๋ฐ๋ฅธ ์คํ์ผ ์ง์ ๋ฑ ์ธ๋ผ์ธ ์คํ์ผ์์ ํ ์ ์๋ ๋ชจ๋ ๊ฒ๋ค์ ์ฌ์ฉํ ์ ์๋ค.
Tailwind ํน์ง
๋ฏธ๋ฆฌ ์ ์๋ ํด๋์ค๋ค์ ์ ๊ณตํ์ฌ ์ฝ๊ฒ ๋์์ธ์ ๊ตฌ์ถํ ์ ์๋๋ก ๋์์ค๋ค.
์ฅ์
HTML๋ง ๋ณด๊ณ ์ด๋ค ์คํ์ผ์ด ์ ์ฉ๋์๋์ง ์ฝ๊ฒ ํ์ ๊ฐ๋ฅ
ํด๋์ค ์ด๋ฆ์ ๊ณ ๋ฏผํ ํ์ ์๋ค.
๋ฏธ๋ฆฌ ์ ์๋ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํ๋ฏ๋ก CSS ์ฝ๋๋ฅผ ์์ฑํ๋๋ฐ ๋ค์ด๋ ๋ ธ๋ ฅ์ด ์ค์ด ๊ฐ๋ฐ ์๋ ํฅ์๋จ
์ผ๊ด๋ ์คํ์ผ์ ์ฌ์ฉํ๋ฏ๋ก ์ ์ง๋ณด์ํ๊ธฐ ์ข๋ค.
์ ๊ณต๋๋ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ค์ด ์์ฒญ๋๋ค.
๋จ์
๊ธฐ๋ณธ์ ์ผ๋ก ์ ์๋ ํด๋์ค๋ฅผ ์ธ์์ผ ํ๋ค.
์คํ์ผ์ด ๋ณต์กํด์ง ์๋ก ์ฌ์ฉํ๋ ํด๋์ค๋ค์ด ๋์ด๋ HTML ์ฝ๋๊ฐ ๋ณต์กํด์ง๊ณ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋ค.
์ถ์ฒ VSCode Extension
Tailwind CSS Intellisense
Tailwind ํด๋์ค ์๋ ์์ฑ ๋ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ธฐ๋ฅ์ ์ ๊ณต
Headwind
ํด๋์ค ๋ค์ด๋ฐ์ ์คํ์ผ ์นดํ ๊ณ ๋ฆฌ ๋ณ๋ก ์ ๋ ฌํด์ค๋ค.
์ฝ๋์ ๊ฐ๋ ์ฑ์ ๋ํ๊ณ ์ค๋ณต๋ ํด๋์ค๋ฅผ ์ฐพ๊ฒ ๋์์ค๋ค.
inline fold
tailwind class ๋ถ๋ถ์ ์ ์ด๋๋ ๊ธฐ๋ฅ
ํธ๋ฒ ๋๋ ํฌ์ปค์ฑ ๋๋ฉด ํผ์ณ์ง๋ค.
์์ํ๊ธฐ
Install
npm install -D tailwindcss postcss autoprefixer
postcss โ CSS ์ ์ฒ๋ฆฌ๊ธฐ, ๋ค์ํ ํ๋ฌ๊ทธ์ธ์ ํตํด CSS๋ฅผ ๋ถ์ํ๊ณ ๋ณํํ๋๋ฐ ์ฌ์ฉ๋๋ค.
autoprefixer โ ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ์ํ
vendor prefix
๋ฅผ ์๋์ผ๋ก ์ถ๊ฐํด์ฃผ๋ postcss ํ๋ฌ๊ทธ์ธ
๊ธฐ๋ณธ ์ค์ ํ์ผ ์์ฑ
tailwind.config.js
, postcss.config.js
์ค์ ํ์ผ ์ถ๊ฐ
-p
์ต์
์ ์ฌ์ฉํ๋ฉด postcss.config.js
ํ์ผ๋ ์ถ๊ฐ๋ก ์์ฑ๋๋ค.
npx tailwind init -p
tailwind.config.js
tailwind.config.js
tailwindcss๋ฅผ ํ๋ก์ ํธ์ ๋ง๊ฒ ๊ตฌ์ฑํ ์ ์๋ ์ค์ ํ์ผ
tailwind css์์ ์ ๊ณตํ๋ ๋ค์ํ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์์ ํ๊ฑฐ๋ ์ปค์คํฐ๋ง์ด์ง
ํฐํธ, ์ปฌ๋ฌ ๋ฑ์ ๋์์ธ ์์คํ ์ ํ๋ก์ ํธ์ ๋ง๊ฒ ๊ตฌ์ฑ
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.tsx", "./stories/**/*.tsx"], // ์ ์ฉํ ํ์ผ ๊ฒฝ๋ก
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
postcss.config.js
ํ๋ฌ๊ทธ์ธ์ ๊ตฌ์ฑํ๊ณ ํ๋ฌ๊ทธ์ธ๋ค์ ์ฒ๋ฆฌ ์์๋ฅผ ์ค์ ํ๋ค.
ํ๋ฌ๊ทธ์ธ ๋ฑ๋ก ์์๋๋ก ์คํ๋๊ธฐ ๋๋ฌธ์ ์์์ ์ ์ํ์.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Tailwind ์ง์๋ฌธ ์ถ๊ฐ
tailwind css๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด css ํ์ผ์
@tailwind
์ง์๋ฌธ๋ฅผ ์ถ๊ฐํ๋ค
Tailwind๋
base
,components
,utilities
์ด 3๊ฐ์ง ๋ ์ด์ด๋ฅผ ์ ๊ณตํ๋ค.๊ฐ ๋ ์ด์ด๋ ํด๋น ๋ ์ด์ด์์ ์ฌ์ฉ์ด ๊ฐ๋ฅํ CSS๊ฐ ํฌํจ๋์ด ์๋ค.
css ํ์ผ๋ก ์ปดํ์ผ๋ ๋ ๊ฐ ๋ ์ด์ด์ ๋ํ CSS ์ฝ๋๋ก ๋ณํ๋๋ค.
@tailwind base;
@tailwind components;
@tailwind utilities;
์ง์๋ฌธ
@tailwind base โ HTML ์์์ ๊ธฐ๋ณธ์ ์ธ ์คํ์ผ์ ์ ์
@tailwind components โ ์ปดํฌ๋ํธ๋ณ ์คํ์ผ์ ์ ์ (์ ํธ๋ฆฌํฐ ํด๋์ค ์งํฉ)
@tailwind utilities โ ๋จ์ผ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ ์
Last updated