{"id":73,"date":"2022-12-13T23:38:15","date_gmt":"2022-12-13T14:38:15","guid":{"rendered":"http:\/\/blog.defree.co.kr\/?p=73"},"modified":"2022-12-13T23:38:15","modified_gmt":"2022-12-13T14:38:15","slug":"fmap-tailwind-%ec%a0%81%ec%9a%a9","status":"publish","type":"post","link":"https:\/\/blog.defree.co.kr\/?p=73","title":{"rendered":"fmap tailwind \uc801\uc6a9"},"content":{"rendered":"\n

tailwind \uc124\uce58 (+ postcss, autoprefixer)<\/h2>\n\n\n\n

tailwind<\/h3>\n\n\n\n

css framework. https:\/\/tailwindcss.com\/<\/p>\n\n\n\n

postcss<\/h3>\n\n\n\n

css\uc640 javascript\uc758 \uacb0\ud569\uc744 \uc9c0\uc6d0\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/p>\n\n\n\n

autoprefixer<\/h3>\n\n\n\n

vender-prefix css \uc790\ub3d9 \uc801\uc6a9 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/p>\n\n\n\n

\n\n\n\n

\uc77c\ub2e8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud55c\ub2e4.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm install -D tailwindcss postcss autoprefixer<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
npx\ub85c tailwind \ucd08\uae30\ud654. \uadf8\ub7fc tailwind.config.js \ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npx tailwindcss init<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
tailwind.config.js \ud30c\uc77c\uc740 \ubcf8 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc801\uc6a9\ud560 tailwind\uc758 \uae30\ubcf8 css \uac12\ub4e4\uc744 \uc124\uc815\ud55c\ub2e4. \ucd08\uae30 \uc0dd\uc131\ub41c \ub0b4\uc6a9\uc740 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/<\/span>**<\/span> @type {import<\/span>(<\/span>'<\/span>tailwindcss<\/span>'<\/span>)<\/span>.Config} <\/span>*<\/span>\/<\/span><\/span>\nmodule.exports = <\/span>{<\/span><\/span>\n  content: <\/span>[]<\/span>,<\/span><\/span>\n  theme: <\/span>{<\/span><\/span>\n    extend: {},<\/span><\/span>\n  <\/span>}<\/span>,<\/span><\/span>\n  plugins: <\/span>[]<\/span>,<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
module.exports.content \ubd80\ubd84\uc5d0 tailwind\uac00 \ud0d0\uc0c9\ud560 html, js, jsx \ub4f1\uc758 \uc801\uc6a9 \ub9ac\uc18c\uc2a4 \ud30c\uc77c\uc744 \uae30\uc220\ud55c\ub2e4. \uc2e4\uc81c \uc801\uc6a9\ud55c \ub0b4\uc6a9\uc740 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/** <\/span>@<\/span>type<\/span> <\/span>{<\/span>import('tailwindcss').Config<\/span>}<\/span> *\/<\/span><\/span>\nconst<\/span> colors <\/span>=<\/span> <\/span>require<\/span>(<\/span>'<\/span>tailwindcss\/colors<\/span>'<\/span>)<\/span><\/span>\n<\/span>\nmodule.exports<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n  <\/span>purge<\/span>:<\/span> [<\/span>'<\/span>.\/public\/**\/*.html<\/span>'<\/span>]<\/span>,<\/span><\/span>\n  <\/span>content<\/span>:<\/span> [<\/span>"<\/span>.\/src\/**\/*.{html,js,jsx,ts,tsx}<\/span>"<\/span>]<\/span>,<\/span><\/span>\n  <\/span>darkMode<\/span>:<\/span> <\/span>'<\/span>class<\/span>'<\/span>,<\/span> <\/span>\/\/ or 'media' or false<\/span><\/span>\n  <\/span>theme<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>fontFamily<\/span>:<\/span> <\/span>{<\/span><\/span>\n      <\/span>sans<\/span>:<\/span> [<\/span>'<\/span>cairo<\/span>'<\/span>,<\/span> <\/span>'<\/span>sans-serif<\/span>'<\/span>]<\/span>,<\/span><\/span>\n    <\/span>},<\/span><\/span>\n    <\/span>extend<\/span>:<\/span> <\/span>{<\/span><\/span>\n      <\/span>colors<\/span>:<\/span> <\/span>{<\/span><\/span>\n        <\/span>light<\/span>:<\/span> <\/span>'<\/span>var(--light)<\/span>'<\/span>,<\/span><\/span>\n        <\/span>dark<\/span>:<\/span> <\/span>'<\/span>var(--dark)<\/span>'<\/span>,<\/span><\/span>\n        <\/span>darker<\/span>:<\/span> <\/span>'<\/span>var(--darker)<\/span>'<\/span>,<\/span><\/span>\n        <\/span>primary<\/span>:<\/span> <\/span>{<\/span><\/span>\n          <\/span>DEFAULT<\/span>:<\/span> <\/span>'<\/span>var(--color-primary)<\/span>'<\/span>,<\/span><\/span>\n          <\/span>50<\/span>:<\/span> <\/span>'<\/span>var(--color-primary-50)<\/span>'<\/span>,<\/span><\/span>\n          <\/span>100<\/span>:<\/span> <\/span>'<\/span>var(--color-primary-100)<\/span>'<\/span>,<\/span><\/span>\n          <\/span>light<\/span>:<\/span> <\/span>'<\/span>var(--color-primary-light)<\/span>'<\/span>,<\/span><\/span>\n          <\/span>lighter<\/span>:<\/span> <\/span>'<\/span>var(--color-primary-lighter)<\/span>'<\/span>,<\/span><\/span>\n          <\/span>dark<\/span>:<\/span> <\/span>'<\/span>var(--color-primary-dark)<\/span>'<\/span>,<\/span><\/span>\n          <\/span>darker<\/span>:<\/span> <\/span>'<\/span>var(--color-primary-darker)<\/span>'<\/span>,<\/span><\/span>\n        <\/span>},<\/span><\/span>\n        <\/span>secondary<\/span>:<\/span> <\/span>{<\/span><\/span>\n          <\/span>DEFAULT<\/span>:<\/span> colors<\/span>.<\/span>fuchsia[<\/span>600<\/span>]<\/span>,<\/span><\/span>\n          <\/span>50<\/span>:<\/span> colors<\/span>.<\/span>fuchsia[<\/span>50<\/span>]<\/span>,<\/span><\/span>\n          <\/span>100<\/span>:<\/span> colors<\/span>.<\/span>fuchsia[<\/span>100<\/span>]<\/span>,<\/span><\/span>\n          <\/span>light<\/span>:<\/span> colors<\/span>.<\/span>fuchsia[<\/span>500<\/span>]<\/span>,<\/span><\/span>\n          <\/span>lighter<\/span>:<\/span> colors<\/span>.<\/span>fuchsia[<\/span>400<\/span>]<\/span>,<\/span><\/span>\n          <\/span>dark<\/span>:<\/span> colors<\/span>.<\/span>fuchsia[<\/span>700<\/span>]<\/span>,<\/span><\/span>\n          <\/span>darker<\/span>:<\/span> colors<\/span>.<\/span>fuchsia[<\/span>800<\/span>]<\/span>,<\/span><\/span>\n        <\/span>},<\/span><\/span>\n        <\/span>success<\/span>:<\/span> <\/span>{<\/span><\/span>\n          <\/span>DEFAULT<\/span>:<\/span> colors<\/span>.<\/span>green[<\/span>600<\/span>]<\/span>,<\/span><\/span>\n          <\/span>50<\/span>:<\/span> colors<\/span>.<\/span>green[<\/span>50<\/span>]<\/span>,<\/span><\/span>\n          <\/span>100<\/span>:<\/span> colors<\/span>.<\/span>green[<\/span>100<\/span>]<\/span>,<\/span><\/span>\n          <\/span>light<\/span>:<\/span> colors<\/span>.<\/span>green[<\/span>500<\/span>]<\/span>,<\/span><\/span>\n          <\/span>lighter<\/span>:<\/span> colors<\/span>.<\/span>green[<\/span>400<\/span>]<\/span>,<\/span><\/span>\n          <\/span>dark<\/span>:<\/span> colors<\/span>.<\/span>green[<\/span>700<\/span>]<\/span>,<\/span><\/span>\n          <\/span>darker<\/span>:<\/span> colors<\/span>.<\/span>green[<\/span>800<\/span>]<\/span>,<\/span><\/span>\n        <\/span>},<\/span><\/span>\n        <\/span>warning<\/span>:<\/span> <\/span>{<\/span><\/span>\n          <\/span>DEFAULT<\/span>:<\/span> colors<\/span>.<\/span>orange[<\/span>600<\/span>]<\/span>,<\/span><\/span>\n          <\/span>50<\/span>:<\/span> colors<\/span>.<\/span>orange[<\/span>50<\/span>]<\/span>,<\/span><\/span>\n          <\/span>100<\/span>:<\/span> colors<\/span>.<\/span>orange[<\/span>100<\/span>]<\/span>,<\/span><\/span>\n          <\/span>light<\/span>:<\/span> colors<\/span>.<\/span>orange[<\/span>500<\/span>]<\/span>,<\/span><\/span>\n          <\/span>lighter<\/span>:<\/span> colors<\/span>.<\/span>orange[<\/span>400<\/span>]<\/span>,<\/span><\/span>\n          <\/span>dark<\/span>:<\/span> colors<\/span>.<\/span>orange[<\/span>700<\/span>]<\/span>,<\/span><\/span>\n          <\/span>darker<\/span>:<\/span> colors<\/span>.<\/span>orange[<\/span>800<\/span>]<\/span>,<\/span><\/span>\n        <\/span>},<\/span><\/span>\n        <\/span>danger<\/span>:<\/span> <\/span>{<\/span><\/span>\n          <\/span>DEFAULT<\/span>:<\/span> colors<\/span>.<\/span>red[<\/span>600<\/span>]<\/span>,<\/span><\/span>\n          <\/span>50<\/span>:<\/span> colors<\/span>.<\/span>red[<\/span>50<\/span>]<\/span>,<\/span><\/span>\n          <\/span>100<\/span>:<\/span> colors<\/span>.<\/span>red[<\/span>100<\/span>]<\/span>,<\/span><\/span>\n          <\/span>light<\/span>:<\/span> colors<\/span>.<\/span>red[<\/span>500<\/span>]<\/span>,<\/span><\/span>\n          <\/span>lighter<\/span>:<\/span> colors<\/span>.<\/span>red[<\/span>400<\/span>]<\/span>,<\/span><\/span>\n          <\/span>dark<\/span>:<\/span> colors<\/span>.<\/span>red[<\/span>700<\/span>]<\/span>,<\/span><\/span>\n          <\/span>darker<\/span>:<\/span> colors<\/span>.<\/span>red[<\/span>800<\/span>]<\/span>,<\/span><\/span>\n        <\/span>},<\/span><\/span>\n        <\/span>info<\/span>:<\/span> <\/span>{<\/span><\/span>\n          <\/span>DEFAULT<\/span>:<\/span> colors<\/span>.<\/span>cyan[<\/span>600<\/span>]<\/span>,<\/span><\/span>\n          <\/span>50<\/span>:<\/span> colors<\/span>.<\/span>cyan[<\/span>50<\/span>]<\/span>,<\/span><\/span>\n          <\/span>100<\/span>:<\/span> colors<\/span>.<\/span>cyan[<\/span>100<\/span>]<\/span>,<\/span><\/span>\n          <\/span>light<\/span>:<\/span> colors<\/span>.<\/span>cyan[<\/span>500<\/span>]<\/span>,<\/span><\/span>\n          <\/span>lighter<\/span>:<\/span> colors<\/span>.<\/span>cyan[<\/span>400<\/span>]<\/span>,<\/span><\/span>\n          <\/span>dark<\/span>:<\/span> colors<\/span>.<\/span>cyan[<\/span>700<\/span>]<\/span>,<\/span><\/span>\n          <\/span>darker<\/span>:<\/span> colors<\/span>.<\/span>cyan[<\/span>800<\/span>]<\/span>,<\/span><\/span>\n        <\/span>},<\/span><\/span>\n      <\/span>},<\/span><\/span>\n    <\/span>},<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>variants<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>extend<\/span>:<\/span> <\/span>{<\/span><\/span>\n      <\/span>backgroundColor<\/span>:<\/span> [<\/span>'<\/span>checked<\/span>'<\/span>,<\/span> <\/span>'<\/span>disabled<\/span>'<\/span>]<\/span>,<\/span><\/span>\n      <\/span>opacity<\/span>:<\/span> [<\/span>'<\/span>dark<\/span>'<\/span>]<\/span>,<\/span><\/span>\n      <\/span>overflow<\/span>:<\/span> [<\/span>'<\/span>hover<\/span>'<\/span>]<\/span>,<\/span><\/span>\n    <\/span>},<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>plugins<\/span>:<\/span> []<\/span>,<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
tailwind\ub294 tailwind\uc758 \uaddc\uce59\uc5d0 \ub530\ub77c\uc11c \uc791\uc131\ub41c css \ud30c\uc77c\uc744 \ucef4\ud30c\uc77c\ud558\uc5ec \uc2e4\uc81c html, js\uc5d0 \uc801\uc6a9\ud560 css\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npx tailwindcss -i .\/src\/tailwind.css -p .\/public\/fmap.css<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\uadf8\ub798\uc11c \uc2e4\uc81c \uc791\uc131\ud55c(\ucef4\ud30c\uc77c \uc804) css \ud30c\uc77c\uc744 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
:<\/span>root<\/span> <\/span>{<\/span><\/span>\n  --light<\/span>:<\/span> <\/span>#<\/span>edf2f9<\/span>;<\/span><\/span>\n  --dark<\/span>:<\/span> <\/span>#<\/span>152e4d<\/span>;<\/span><\/span>\n  --darker<\/span>:<\/span> <\/span>#<\/span>12263f<\/span>;<\/span><\/span>\n  <\/span>\/*  *\/<\/span><\/span>\n  --color-primary<\/span>:<\/span> <\/span>var<\/span>(<\/span>--color-cyan<\/span>);<\/span><\/span>\n  --color-primary-50<\/span>:<\/span> <\/span>var<\/span>(<\/span>--color-cyan-50<\/span>);<\/span><\/span>\n  --color-primary-100<\/span>:<\/span> <\/span>var<\/span>(<\/span>--color-cyan-100<\/span>);<\/span><\/span>\n  --color-primary-light<\/span>:<\/span> <\/span>var<\/span>(<\/span>--color-cyan-light<\/span>);<\/span><\/span>\n  --color-primary-lighter<\/span>:<\/span> <\/span>var<\/span>(<\/span>--color-cyan-lighter<\/span>);<\/span><\/span>\n  --color-primary-dark<\/span>:<\/span> <\/span>var<\/span>(<\/span>--color-cyan-dark<\/span>);<\/span><\/span>\n  --color-primary-darker<\/span>:<\/span> <\/span>var<\/span>(<\/span>--color-cyan-darker<\/span>);<\/span><\/span>\n  <\/span>\/*  *\/<\/span><\/span>\n  --color-green<\/span>:<\/span> <\/span>#<\/span>16a34a<\/span>;<\/span><\/span>\n  --color-green-50<\/span>:<\/span> <\/span>#<\/span>f0fdf4<\/span>;<\/span><\/span>\n  --color-green-100<\/span>:<\/span> <\/span>#<\/span>dcfce7<\/span>;<\/span><\/span>\n  --color-green-light<\/span>:<\/span> <\/span>#<\/span>22c55e<\/span>;<\/span><\/span>\n  --color-green-lighter<\/span>:<\/span> <\/span>#<\/span>4ade80<\/span>;<\/span><\/span>\n  --color-green-dark<\/span>:<\/span> <\/span>#<\/span>15803d<\/span>;<\/span><\/span>\n  --color-green-darker<\/span>:<\/span> <\/span>#<\/span>166534<\/span>;<\/span><\/span>\n  <\/span>\/*  *\/<\/span><\/span>\n  --color-blue<\/span>:<\/span> <\/span>#<\/span>2563eb<\/span>;<\/span><\/span>\n  --color-blue-50<\/span>:<\/span> <\/span>#<\/span>eff6ff<\/span>;<\/span><\/span>\n  --color-blue-100<\/span>:<\/span> <\/span>#<\/span>dbeafe<\/span>;<\/span><\/span>\n  --color-blue-light<\/span>:<\/span> <\/span>#<\/span>3b82f6<\/span>;<\/span><\/span>\n  --color-blue-lighter<\/span>:<\/span> <\/span>#<\/span>60a5fa<\/span>;<\/span><\/span>\n  --color-blue-dark<\/span>:<\/span> <\/span>#<\/span>1d4ed8<\/span>;<\/span><\/span>\n  --color-blue-darker<\/span>:<\/span> <\/span>#<\/span>1e40af<\/span>;<\/span><\/span>\n  <\/span>\/*  *\/<\/span><\/span>\n  --color-cyan<\/span>:<\/span> <\/span>#<\/span>0891b2<\/span>;<\/span><\/span>\n  --color-cyan-50<\/span>:<\/span> <\/span>#<\/span>ecfeff<\/span>;<\/span><\/span>\n  --color-cyan-100<\/span>:<\/span> <\/span>#<\/span>cffafe<\/span>;<\/span><\/span>\n  --color-cyan-light<\/span>:<\/span> <\/span>#<\/span>06b6d4<\/span>;<\/span><\/span>\n  --color-cyan-lighter<\/span>:<\/span> <\/span>#<\/span>22d3ee<\/span>;<\/span><\/span>\n  --color-cyan-dark<\/span>:<\/span> <\/span>#<\/span>0e7490<\/span>;<\/span><\/span>\n  --color-cyan-darker<\/span>:<\/span> <\/span>#<\/span>155e75<\/span>;<\/span><\/span>\n  <\/span>\/*  *\/<\/span><\/span>\n  --color-teal<\/span>:<\/span> <\/span>#<\/span>0d9488<\/span>;<\/span><\/span>\n  --color-teal-50<\/span>:<\/span> <\/span>#<\/span>f0fdfa<\/span>;<\/span><\/span>\n  --color-teal-100<\/span>:<\/span> <\/span>#<\/span>ccfbf1<\/span>;<\/span><\/span>\n  --color-teal-light<\/span>:<\/span> <\/span>#<\/span>14b8a6<\/span>;<\/span><\/span>\n  --color-teal-lighter<\/span>:<\/span> <\/span>#<\/span>2dd4bf<\/span>;<\/span><\/span>\n  --color-teal-dark<\/span>:<\/span> <\/span>#<\/span>0f766e<\/span>;<\/span><\/span>\n  --color-teal-darker<\/span>:<\/span> <\/span>#<\/span>115e59<\/span>;<\/span><\/span>\n  <\/span>\/*  *\/<\/span><\/span>\n  --color-fuchsia<\/span>:<\/span> <\/span>#<\/span>c026d3<\/span>;<\/span><\/span>\n  --color-fuchsia-50<\/span>:<\/span> <\/span>#<\/span>fdf4ff<\/span>;<\/span><\/span>\n  --color-fuchsia-100<\/span>:<\/span> <\/span>#<\/span>fae8ff<\/span>;<\/span><\/span>\n  --color-fuchsia-light<\/span>:<\/span> <\/span>#<\/span>d946ef<\/span>;<\/span><\/span>\n  --color-fuchsia-lighter<\/span>:<\/span> <\/span>#<\/span>e879f9<\/span>;<\/span><\/span>\n  --color-fuchsia-dark<\/span>:<\/span> <\/span>#<\/span>a21caf<\/span>;<\/span><\/span>\n  --color-fuchsia-darker<\/span>:<\/span> <\/span>#<\/span>86198f<\/span>;<\/span><\/span>\n  <\/span>\/*  *\/<\/span><\/span>\n  --color-violet<\/span>:<\/span> <\/span>#<\/span>7c3aed<\/span>;<\/span><\/span>\n  --color-violet-50<\/span>:<\/span> <\/span>#<\/span>f5f3ff<\/span>;<\/span><\/span>\n  --color-violet-100<\/span>:<\/span> <\/span>#<\/span>ede9fe<\/span>;<\/span><\/span>\n  --color-violet-light<\/span>:<\/span> <\/span>#<\/span>8b5cf6<\/span>;<\/span><\/span>\n  --color-violet-lighter<\/span>:<\/span> <\/span>#<\/span>a78bfa<\/span>;<\/span><\/span>\n  --color-violet-dark<\/span>:<\/span> <\/span>#<\/span>6d28d9<\/span>;<\/span><\/span>\n  --color-violet-darker<\/span>:<\/span> <\/span>#<\/span>5b21b6<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n@tailwind<\/span> base<\/span>;<\/span><\/span>\n@tailwind<\/span> components<\/span>;<\/span><\/span>\n@tailwind<\/span> utilities<\/span>;<\/span><\/span>\n<\/span>\n@layer<\/span> components <\/span>{<\/span><\/span>\n  <\/span>.<\/span>toggle<\/span>:<\/span>checked<\/span> <\/span>+<\/span> <\/span>span<\/span> <\/span>{<\/span><\/span>\n    @apply top-0 left-6 bg-primary<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>.<\/span>toggle<\/span>:<\/span>disabled<\/span> <\/span>+<\/span> <\/span>span<\/span> <\/span>{<\/span><\/span>\n    @apply bg-gray-500 shadow-none<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>.<\/span>toggle<\/span>:<\/span>checked<\/span>:<\/span>disabled<\/span> <\/span>{<\/span><\/span>\n    @apply bg-gray-200<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>.<\/span>toggle<\/span>:<\/span>checked<\/span>:<\/span>disabled<\/span> <\/span>+<\/span> <\/span>span<\/span> <\/span>{<\/span><\/span>\n    @apply shadow-none bg-primary-lighter<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>.<\/span>toggle<\/span>:<\/span>focus<\/span> <\/span>+<\/span> <\/span>span<\/span> <\/span>{<\/span><\/span>\n    @apply ring ring-primary-lighter<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n<\/span>\n  <\/span>input<\/span>:<\/span>invalid<\/span>.<\/span>invalid<\/span>,<\/span><\/span>\n  <\/span>textarea<\/span>:<\/span>invalid<\/span>.<\/span>invalid<\/span> <\/span>{<\/span><\/span>\n    @apply ring ring-danger-light dark<\/span>:<\/span>ring-danger<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\uc0dd\uc131\ub41c css \ud30c\uc77c\uc740 \ub108\ubb34 \uae38\uc5b4\uc11c \ub118\uc5b4\uac04\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
tailwind \uc124\uce58 (+ postcss, autoprefixer) tailwind css framework. https:\/\/tailwindcss.com\/ postcss css\uc640 javascript\uc758 \uacb0\ud569\uc744 \uc9c0\uc6d0\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac autoprefixer vender-prefix css \uc790\ub3d9 \uc801\uc6a9 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc77c\ub2e8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud55c\ub2e4. npx\ub85c tailwind \ucd08\uae30\ud654. \uadf8\ub7fc tailwind.config.js \ub97c \uc0dd\uc131\ud55c\ub2e4. tailwind.config.js \ud30c\uc77c\uc740 \ubcf8 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc801\uc6a9\ud560 tailwind\uc758 \uae30\ubcf8 css \uac12\ub4e4\uc744 \uc124\uc815\ud55c\ub2e4. \ucd08\uae30 \uc0dd\uc131\ub41c \ub0b4\uc6a9\uc740 \uc544\ub798\uc640 \uac19\ub2e4. module.exports.content \ubd80\ubd84\uc5d0 tailwind\uac00 \ud0d0\uc0c9\ud560 html, js, jsx \ub4f1\uc758 \uc801\uc6a9 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-1","post-preview"],"_links":{"self":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=73"}],"version-history":[{"count":1,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":74,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions\/74"}],"wp:attachment":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}