간단한 HTML 프로젝트에 tailwindcss를 추가하는 방법 🍵

간단한 HTML 프로젝트에 tailwindcss를 추가하는 방법

이 문서에서는 HTML 프로젝트에 Tailwindcss 스타일시트를 추가하는 방법을 설명합니다. Tailwind CSS는 사용자 정의가 가능한 저수준 CSS 프레임워크로, 무시하기 위해 싸워야 하는 성가신 독단적인 스타일 없이 맞춤형 디자인을 구축하는 데 필요한 모든 구성 요소를 제공합니다.

HTML 프로젝트에 Tailwind CSS를 추가하려면 다음 단계를 따르세요.

프로젝트 초기화

yarn init

taillwindcss, postcss-cli 및 autprefixer 설치

yarn add tailwindcss postcss-cli autoprefixer -D

-D 옵션peerDependencies에 패키지를 저장하려면

tailwindcss에 대한 기본 구성 파일 만들기

npx tailwind init tailwind.js -full

postcss.config.js 파일 생성

touch postcss.config.js

postcss.config.js를 편집하고 입력하십시오.

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

다음과 같이 tailwind.css 파일을 만듭니다.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

postcss를 사용하여 스타일시트 style.css 생성

npx postcss tailwind.css -o style.css

HTML 프로젝트에서 style.css 사용

<html>
 <head>
    <link rel="stylesheet" href="style.css"/>
    </head>
 <body>
     <h1>Hello world</h1>
</body>
</html>

라이브 서버로 테스트

yarn add live-server -D

live-server

Reference

이 문제에 관하여(간단한 HTML 프로젝트에 tailwindcss를 추가하는 방법 🍵), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/raphaelmansuy/how-to-add-tailwindcss-to-a-simple-html-project-446g

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

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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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