Tailwind 설정 방법

Tailwind는 유틸리티 우선 CSS 프레임워크입니다.
이 도움말에서는 Tailwind를 설정하는 방법을 설명합니다.

설치

npm i --save-dev tailwindcss

초기화

npx tailwindcss init

환경

// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

쓰다

/* src/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

짓다

npx tailwindcss build -i ./src/index.css -o ./dist/index.css

페이지에서 Tailwind 사용

<!-- src/index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dist/index.css" rel="stylesheet" />
  </head>
  <body>
    <p class="underline">Hello</p>
  </body>
</html>

확인하다

serve .

http://localhost:3000/src/index.html

Visual Studio 코드 지원

// .vscode/extensions.json

{
  "recommendations": ["bradlc.vscode-tailwindcss"]
}

Reference

이 문제에 관하여(Tailwind 설정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jtakahashi64/how-to-set-up-tailwind-4g3f

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다