TailwindCSS - IntelliSense ์ž๋™์™„์„ฑ์„ ์ฒซ ๋ฌธ์ž์—ด๋ถ€ํ„ฐ ํ™œ์„ฑํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ•
ยท
๐ŸŒŠ TailwindCSS
โœ… IntelliSense ์ž๋™์™„์„ฑ์„ ์ฒซ ๋ฌธ์ž์—ด๋ถ€ํ„ฐ ํ™œ์„ฑํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ•settings.json"editor.quickSuggestions": { "strings": true,}
TailwindCSS - Layer
ยท
๐ŸŒŠ TailwindCSS
โœ… Layer๋ž€?CSS์˜ layer ๊ฐœ๋…์€ CSS Cascade(์Šคํƒ€์ผ์ด ์ ์šฉ๋˜๋Š” ์šฐ์„ ์ˆœ์œ„) ์•ˆ์—์„œ ์Šคํƒ€์ผ ์‹œํŠธ ๊ฐ„์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ ์ œ์–ดํ•˜๊ธฐ ์œ„ํ•ด ์ถ”๊ฐ€๋œ ์ƒˆ๋กœ์šด ๊ทœ์น™ ์‰ฝ๊ฒŒ ๋งํ•ด, CSS์—์„œ ์—ฌ๋Ÿฌ ์Šคํƒ€์ผ์ด ๊ฒน์น  ๋•Œ ๋ˆ„๊ฐ€ ์ด๊ธธ์ง€ ๋ช…ํ™•ํ•˜๊ฒŒ ์ˆœ์„œ๋ฅผ ์ •ํ•ด์ฃผ๋Š” ๋ฐฉ๋ฒ• TailwindCSS์—์„œ์˜ layerTailwind๋Š” CSS๋ฅผ ํฌ๊ฒŒ ์„ธ ๊ฐ€์ง€ ๋ ˆ์ด์–ด๋กœ ๋‚˜๋ˆ ์„œ ๊ด€๋ฆฌ Base๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ณธ ์Šคํƒ€์ผ ๋ฆฌ์…‹๊ณผ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ์ดˆ๊ธฐํ™” ๊ฐ™์€ ๊ธฐ๋ณธ ์Šคํƒ€์ผ์ด ์—ฌ๊ธฐ์— ์†ํ•จ.์˜ˆ: html, body, a ํƒœ๊ทธ ๊ธฐ๋ณธ ์„ค์ •Components์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ์ˆ˜์ค€์˜ ์Šคํƒ€์ผ์ด ์—ฌ๊ธฐ์— ๋“ค์–ด๊ฐ.์˜ˆ: ๋ฒ„ํŠผ, ์นด๋“œ, ๋ชจ๋‹ฌ ๊ฐ™์€ UI ์ปดํฌ๋„ŒํŠธUtilitiesbg-red-500, p-4, flex ๊ฐ™์€ ์›์ž ๋‹จ์œ„ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค Tailwind๋Š”..
TailwindCSS - Awesomeํ•œ ๊ธฐ๋Šฅ๋“ค
ยท
๐ŸŒŠ TailwindCSS
โœ… ๋ฐ˜์‘ํ˜• ๋””์ž์ธsm -> @media(min-width: 640px)md -> @media(min-width: 768px)lg -> @media(min-width: 1024px) dark -> @media(prefers-color-scheme: dark) lg: grid-cols-2๋ผ์ง€ ์‚ฌ์ด์ฆˆ ํ™”๋ฉด์—์„œ๋Š” 2๊ฐœ์˜ column์„ ๊ฐ€์ง„๋‹ค. โœ… ringring-22px์˜ ring border๊ฐ€ ์ƒ๊น€ ring-offset-2ring์— 2px์˜ ๊ฐ„๊ฒฉ์ด ์ƒ๊น€ ring-yellow-500ring ์ƒ‰์ƒ ์„ค์ • focus:ring-2focus์‹œ ring ์ƒ์„ฑ ring-opacity-20ring์˜ ๋ถˆํˆฌ๋ช…๋„๋ฅผ 20%๋กœ ์„ค์ • โœ… TransitionclassName์— transition์„ ์ถ”๊ฐ€ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ์ž๋™์œผ๋กœ ์˜ˆ์œ trans..
TailwindCSS - ์‹œ์ž‘ํ•˜๊ธฐ
ยท
๐ŸŒŠ TailwindCSS
โœ… Setup์„ค์น˜npm i -D tailwindcss postcss autoprefixer ์„ค์ •npx tailwindcss init -p-p๋Š” --postcss์˜ ์ค„์ž„๋ง๋กœ,postcss.config.js ํŒŒ์ผ์„ ํ•จ๊ป˜ ์ƒ์„ฑํ•ด์ฃผ๋Š” ์˜ต์…˜(TailwindCSS๋Š” PostCSS ๊ธฐ๋ฐ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•„์ˆ˜๋‹ค.) โœ… tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, darkMode: "media", // class ..