์ด๋ฒ Next ๋ฅผ ์ ์ฉํ๋ฉด์ ๊ธฐ์กด Sass ๋์ Tailwindcss ๋ฅผ ์ ์ฉํ๊ฒ ๋์์ต๋๋ค. ์ด์ ์ ์ฉํ๋ ๊ณผ์ ๊ณผ ์ ์ฉํ๋ฉด์ ๋๋์ ์ ์ ์ด๋ณด๋ ค๊ณ ํฉ๋๋ค.
Tailwindcss ๋ ๋ง์ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ก ์ด๋ฃจ์ด์ง CSS ํ๋ ์์ํฌ ์ ๋๋ค. ๊ธฐ์กด css ํ๋ ์์ํฌ๋ค์ด ๋ฏธ๋ฆฌ ์ ์๋ ์ปดํฌ๋ํธ ์์ฒด๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ์์ด์๋ค๋ฉด, tailwindcss ๋ ๋ณด๋ค ์ ์์ค์ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ ๊ณตํด ํด๋น ํด๋์ค๋ฅผ HTML ๋งํฌ์ ๋ด๋ถ์ ์ถ๊ฐํด์ ๋์์ธ์ ๊ตฌ์ฑํ๋ ๋ฐฉ์์ ๋๋ค.
์ ์์ค์ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ ๊ณตํ๋ค ๋ณด๋ ๊ฐ๋ฐ์๊ฐ css ํ์ผ์ ์ง์ ์์ฑํ์ง ์๊ณ HTML ๋ด๋ถ์์ ๋น ๋ฅด๊ฒ ํจ์จ์ ์ธ UI๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ์ผ๊ด์ ์ผ๋ก ์ ํด์ง ๋์์ธ ์์คํ
์ ์ ์งํ๊ธฐ๋ ์ฌ์ธ ๋ฟ๋ง ์๋๋ผ, tailwind.config.js ํ์ผ ๋ฑ์ผ๋ก ์ปค์คํฐ๋ง์ด์ง์ ์ ๊ณตํฉ๋๋ค. ๋ํ css ํ์ผ์ ์์ฑํ์ง ์๋ค ๋ณด๋ HTML ๋ด๋ถ์์ ๋น ๋ฅด๊ฒ ์คํ์ผ์ ์์ ํ ์ ์์ด ํธ๋ฆฌํฉ๋๋ค.
๋ค๋ง ๋ง์ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ด๋ฐ์ ๋ฌ๋์ปค๋ธ๊ฐ ์กด์ฌํฉ๋๋ค. ๋ํ ๋ณต์กํ ๋์์ธ์ ๋ง๋ค์ด์ผ ํ๋ ๊ฒฝ์ฐ HTML ์ฝ๋๊ฐ ๊ธธ์ด์ง ์ ์์ด ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง ์ ์๋ค๋ ์ ์ด ์กด์ฌํฉ๋๋ค. ํ์ง๋ง ์ต์ํด์ง๋ฉด ๊ต์ฅํ ํธ๋ฆฌํ๊ณ ํจ์จ์ ์ผ๋ก ๋๊ปด์ง๋๋ค.
Next.js Tailwind docs ๋ฅผ ์ฐธ๊ณ ํด์ ์ด๊ธฐ ์ค์ ์ ์งํํ์ต๋๋ค.
shell
// tailwind 3.4.17 ๋ฒ์ ์ฌ์ฉ pnpm add -D tailwindcss@3.4.17 postcss autoprefixer
tailwind.config.js ๋ฅผ ์ฌ์ฉํ๋ฉด css ์ ๊ธฐ๋ณธ ๋์ ๋ฐฉ์์ ๋ณ๊ฒฝํ๊ณ ์ปค์คํ ๋์์ธ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
js
// tailwind.config.js
const config = {
content: [
...
],
theme: {
extend: {},
colors: {},
},
plugins: [],
};
export default config;
content : tailwind ๊ฐ css ์์ฑํ๊ธฐ ์ํด ์ค์บํ ํ์ผ ๊ฒฝ๋ก๋ฅผ ์ง์ ํฉ๋๋ค. ํด๋น ํ์ผ ๊ฒฝ๋ก๊ฐ ์๋๋ผ๋ฉด tailwind ๊ฐ ์ ์ฉ๋์ง ์์ต๋๋ค.theme : ๊ธฐ์กด tailwind ํ
๋ง๋ฅผ ํ์ฅํ๊ฑฐ๋ , ์ปค์คํ
์คํ์ผ์ ์ง์ ํ ์ ์์ต๋๋ค.
extend : ๊ธฐ์กด ํ
๋ง๋ฅผ ๋๊ณ , ์ถ๊ฐ๋ก ํ
๋ง๋ฅผ ์ง์ ํ ๋ ์ฌ์ฉํฉ๋๋ค.colors : ๊ธฐ์กด ํ
๋ง๋ฅผ ๋ฎ์ด์๋๋ค. ๋ง์ฝ ์๋ชป ์ง์ ํ๊ฒ ๋๋ฉด ์ด์ ๋ค๋ฅธ ํ
๋ง๊ฐ ๋ชจ๋ ์ฌ๋ผ์ง๊ธฐ ๋๋ฌธ์, ์ฃผ์๊ฐ ํ์ํฉ๋๋ค.plugins : tailwind ์ ์ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ ํ๋ฌ๊ทธ์ธ๋ค์ ์ถ๊ฐํ ์ ์์ต๋๋ค.tailwind ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์ global css ํ์ผ์ ์๋์ ๊ฐ์ด ์ ์ธํด ์ฃผ์ด์ผ ํฉ๋๋ค.
css
@tailwind base;
// css reset ํ์ผ
@include "./reset.css";
@tailwind components;
@tailwind utilities;
base : tailwind ๊ฐ ์ ๊ณตํ๋ ๋ฒ ์ด์ค ์คํ์ผ์ ์ค์ ํฉ๋๋ค. ์น ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ์คํ์ผ์ ๋ฆฌ์
ํด์ ์ผ๊ด์ ์ผ๋ก ์์๋ ์ ์๋๋ก ํฉ๋๋ค.components : ์ฌ์ฉ์๊ฐ @apply ๋ฑ์ผ๋ก ์ ์ํ ์ปดํฌ๋ํธ ํด๋์ค๊ฐ ์ฌ์ฉ๋ ์ ์๋๋ก ์ถ๊ฐํฉ๋๋ค. ์ค๋ณต์ผ๋ก ์ฌ์ฉ๋๋ ๊ฒ์ ์ค์ด๊ณ , ์ฌ์ฌ์ฉ์ฑ์ ๋์ผ ์ ์์ต๋๋ค.utilities : tailwind ๊ฐ ์ ๊ณตํ๋ ํต์ฌ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด ์ง์๋ฌธ์ด ์์ผ๋ฉด tailwind ๊ฐ ์๋ํ์ง ์์ต๋๋ค.์ด ๋, ๊ฐ์ธ์ ์ธ reset ํ์ผ์ ์ถ๊ฐํ๊ณ ์ถ๋ค๋ฉด base ์ components ์ฌ์ด์ ์์ฑ๋์ด์ผ ํฉ๋๋ค. ๋ง์ฝ reset ํ์ผ์ด base ์ด์ ์ ์ถ๊ฐ๋์๋ค๋ฉด , base ๋ก ์ธํด์ ๋ค์ ๋ฆฌ์
๋์ด ๋ณ๊ฒฝ๋ ๊ฐ๋ฅ์ฑ์ด ์์ต๋๋ค.
์ด๊ฒ๋ง ์๋ฃํ๋ฉด ์ค์ ์ ๋์ ๋๋ค ! ์ด์ HTML ํ์ผ์ ์ง์ ์ถ๊ฐํด์ ์คํํ ์ ์์ต๋๋ค .
js
const Bold = ({ children }: { children: React.ReactNode }) => {
const classNames = "py-[3px] px-[2px] font-semibold";
return <span className={classNames}>{children}</span>;
};
export default Bold;
๊ฐ๋จํ ์์์ธ๋ฐ, Bold ๋ผ๋ ์ปดํฌ๋ํธ์ className ์ ์ถ๊ฐํ ๋ชจ์ต์
๋๋ค.
py-[3px] : ์ํ padding ์ 3px ๋ก ์ค์ ํฉ๋๋ค.px-[2px] : ์ข์ฐ padding ์ 2px ๋ก ์ค์ ํฉ๋๋ค.font-semibold : ํฐํธ๋ฅผ ๊ตต๊ธฐ๋ฅผ semibold ( 600 ) ๋ก ์ค์ ํฉ๋๋ค์์ฒ๋ผ className ์ ์ถ๊ฐํ๊ธฐ๋ง ํ๋ฉด css ๊ฐ ์ค์ ๋ฉ๋๋ค. ์ ๋ง ๊ฐํธํฉ๋๋ค !
์ด๋ฒ์ ์ฒ์์ผ๋ก tailwind ๋ฅผ ์ฌ์ฉํด ๋ณด์๋๋ฐ, ๊ต์ฅํ ํ์ ์ ์ด๊ณ ํธ๋ฆฌํด์ ๋๋์ต๋๋ค. ์ด๊ธฐ ๋ฌ๋์ปค๋ธ๊ฐ ์๊ธด ํ์ง๋ง css ์์ ์ ๋ง์ด ํ๋ค๋ฉด ๊ธ๋ฐฉ ์ ์ํ ์ ์์๊ณ , css ์์ ์๊ฐ์ด ๋ง์ด ์ค์์ต๋๋ค. ์์ผ๋ก ๋ค๋ฅธ ํ๋ก์ ํธ๋ฅผ ์งํํ๋๋ผ๋ tailwind ๋ฅผ ์ฌ์ฉํด ์์ ํ ๊ฒ ๊ฐ์ต๋๋ค.