?? ???? ??? ?? ???? ?????? ???? ?? ? ?? ?????. ?, ??? ????? ??? ????. ?? ???? ?? ?? ???? ?? ????? ??? ? ?? ???? UI ??? ???? ????? ?? ????? ???? ??? ?? ??????. ?? ? 1? ?? ???? ???? ???? ????? ???? ??? ????? ??? ?? ??? ???? ? ??? ? ???? ??? ??? ? ??? ?? ??? ?????. ??? HTML? CSS? ??? ?? ??? ?????? ???? ??? ???? ?? ?????? ??? ?? ??? ????? ?? ????? ?? ???? ??? ??????. ????!

? ???? ?? ? ?? ? ??? ???? ?? ?? ?? ??? ????? ??? ?? ??? ???? ???? ????? ??? ? ??? ????. ????? ?? ????? ¹? ??? ??? ??? HTML ??? ????? ?? ?? JS ??? ????? ???? ????. ??? ?? ??? ? ???? ??????.

??? ?? ??? ??? ???? ???? ????? Tailwind? ?? ?????. ?? ? ????? ? 3? ?? ????? ??? ??? ?? ??? ??? ? ??? ?? ???? ???? ??? ?? ?? ???? ?? ??? ??? ??? ??????(??? ??? ???? ???????). ???? ?? Tailwind? ???? ??? ???? ??? ???? ?? ????. CSS? ?? ?????. ??? CSS ?? ??? ?? ?? ????? Tailwind? ???? ???? ????? ???? ??? ???? ?? ??? ??? ?????.

??? ????? ??? ?? ? ?? ???? ??? ? ??? ???? ?? ??? Tailwind? ?? ? ???? ????. ???? ?? ???? ?????? Tailwind? ????? ?? ????? ???? ?? ?????? Tailwind? ???? ???? ?? ????? ????? ?? ??? ? ? ??? ??????. ??? ??? ?? ??? ????? ?? ???? ??? ??? ?? ??? ?? ????. ?? ?? ???? ????? ?? ??? ?? ? ????.

Tailwind ??

??? ??

?? Front End Tutor?? ????? ?? ??? ?? ????? ??? ? ?? ??? ???? Tailwind ? ?? ?? ??? ???? ???.

npm install -D tailwindcss postcss ?? ???

???? ?? ? ?? ????:

• Tailwind CSS? PostCSS? ???? CSS? ?????. PostCSS? JavaScript ????? ??? CSS? ???? ????, Tailwind CSS ??? PostCSS ????²???.
• Autoprefixer? Can I Use? ?? ???? CSS ??? ???? ???? ???? PostCSS ???????. CSS? ??? ?????? ????? ?????.

????? ????? Tailwind? ???? ? ? ??? ?? ???? ????? ???? ? ???? ?????.

TailwindCSS ???

????, ?? ??? ???? tailwind.config.js ? postcss.config.js ??? ???????.

npx tailwindcss init -p

?? ?? ??

???? tailwind.config.js? ???? index.html? ??? ??? ?????. ??? ?? ???? ???? ?????. Tailwind? ??? ?? ???? ??? ??? ??? ????? ??? ??? ? ????.

Tailwind ???? ???? ???? ???? ??? ????? HTML ??? ?? ? ??? ?? ?? ??? ? ??? ???? ???.

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

CSS? Tailwind ??

???? ??? CSS ??? ???(?? styles.css?? ?? ??) ?? ???? ?????.

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

?? ???? ?? ? ??

package.json ??? CSS? ???? ????? ?????. ??? ??? ???? ??? output.css ??? ?????. --watch ???? ???? CSS ?? ??? ????? ? ? ????. ?, ???? ????? ??? ????? ?? ??? ??? ????.

? ??? ??? ??? ?? ??? ? ????. ???? ??? ?? ????.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

?? ?? ????? ???? CSS? ???? ? ????.

npm run build:css

?? ?????

????? index.html ??(? ???? ??? ?? HTML ??)? ??? ?? ??? ???? ???.

<code><link href="output.css" rel="stylesheet"></link></code>

?? ? ???? Tailwind? ????? ???? ? ????. ?? ?? >

???? ?? ??

Front End Mentor?? ????? ?? ??? ?????? ??? ???? ??? ?? ?? ??? ???? ????. ???? ????? ?? ?? ??? ?? ?? ??? ??? ?????. ??? ??? ?? ??? ./assets/fonts/static? ??? ??? ??? ????.

? ???? ???? ?? ????? ???? style-guide.md ??? ???? ?? ??? ?????, ?? ?? ???? ???? ???? ?? ????.

@font-face ?? ??

???? ???? ??? ? ?? ? CSS ??? ???? ???(?? ????? ??? Fonts.css? ?????). ?? ?? ?? ??? ??? ? ?? ??? ?? @font-face ??? ???? ???.

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

?? ?? Inter ??? ? ?? ?? ???? ???? ?? ?? ??? ???? ?? ? ????? ?? ????.

??? ??? ??? ??? output.css? ???? ??? HTML ??? ??? ??? ???? ???.

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

??? Tailwind ??

?? tailwind.config.js?? ??? ???? ??? ?? ???? ??? ??? ???? ???? ???? ???.

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

????? ??? ?? ??? ?? ? ?? ?? FontFamily ???? ??? ??? ?? ??? ? ????. ??? ??? ??? ??? ?? ??? ? ??? ????? comic-sans? ?? ???? Tailwind ????? ????? ???? ??? ????? ?? ??? ????? ?????.

?? HTML? Font-inter ???? ???? ???? ??? ? ??? ??? ? ????! ?? ??? ??? ??? ?? ???(?: ?? ????)? ???? ??? 600 ???? ??? ?? ????.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

? ??? Tailwind CSS? ???? ????? ?? ????? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!