HTML로 Tailwind CSS를 설정하는 방법

반응형

이 글에서는 HTML 프로젝트로 Tailwind CSS를 설치하고 설정하는 방법을 보여드리겠습니다.

새 프로젝트 만들기

새 폴더 tailwind-html을 만들고 디렉토리를 새로 만든 폴더로 변경해 봅시다.

mkdir tailwind-html

cd tailwind-html

패키지를 만듭니다.json 파일

 

npm init -y

Tailwindcss 종속성 설치

npm install tailwindcss@latest

npm install autoprefixer@latest

npm install @tailwindcss/forms

테일윈드 구성 파일 만들기

npx tailwindcss init

 

패키지를 업데이트합니다.json 파일

패키지를 엽니다.json 파일을 다음과 같이 변경합니다.

"scripts": {
      "build-css": "tailwindcss build src/styles.css -o public/styles.css"
}

tailwind.config.js 업데이트

tailwind.config.js 파일을 열고 내용을 다음 코드로 바꿉니다.

 

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
          extend: {
                  fontFamily: {
                            sans: ['Inter var', ...defaultTheme.fontFamily.sans]
                  }
          }
    },
    variants: {
          extend: {}
    },
    plugins: [require('@tailwindcss/forms')]
};

테일윈드 플러그인 추가

프로젝트 루트에 새 폴더 src를 생성하고 src 폴더에 새 파일 styles.css를 생성하십시오.

styles.css에 다음 내용을 추가합니다.

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

 

테일윈드 CSS 구축

css를 빌드하려면 npm run build-css 명령을 실행해야 합니다. 이 명령은 file styles.css를 사용하여 새 폴더 공용을 만듭니다.

HTML 페이지에서 styles.css를 연결해야 합니다.

<link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    ```

    당신이 이 기사를 통찰력 있게 봤기를 바랍니다.

    <div class="content-ad"></div>

    를 연결해 보겠습니다.

    - 내 블로그 kirandev.com
    - Twitter 팔로우하기
    - 깃허브에서 나를 찾아라