전기방식 이야기
날 HTML에서 Tailwind CSS사용
다른 프레임워크를 사용하지 않고 HTML에서 Tailwind CSS를 사용해 보자.
"Tailwind CSS는 모든 HTML 파일, JavaScript 구성 요소 및 클래스 이름에 대한 기타 템플릿을 스캔하고 해당 스타일을 생성한 다음 이를 정적 CSS 파일에 작성하는 방식으로 작동합니다.런타임이 없고 빠르고 유연하며 안정적입니다."
Tailwind CSS를 처음부터 시작하고 실행하는 가장 간단하고 빠른 방법은 Tailwind CLI 도구를 사용하는 것입니다. CLI는 Node.js를 설치하지 않고 사용하려는 경우 독립 실행형 실행 파일 로도 사용할 수 있습니다.
다른 프레임워크에 의존하지 않는 완전 독립형입니다.
Standalone CLI: Use Tailwind CSS without Node.js - Tailwind CSS
Today we're announcing a new standalone CLI build that gives you the full power of Tailwind CLI in a self-contained executable — no Node.js or npm required.
tailwindcss.com
설치해 볼까요?
1. Tailwind CSS 설치
npm을 통해 다음과 같이 설치하면 tailwind.config.js 가 만들어 집니다.
npm install -D tailwindcss
npx tailwindcss init
2.탬플릿 경오 구성
생성된 tailwind.config.js. 파일에 템플릿 파일에 대한 경로를 추가합니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
3. CSS에 Tailwind 지시어 추가
@tailwindTailwind의 각 레이어에 대한 지시문을 기본 CSS 파일에 추가합니다 .
src폴더를 만들고 내부에 input.css를 만든다. 거기에 아래와 같이 지시어를 입력한다.
src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
4. Tailwind CLI 빌드 프로세스 시작
이거 꼭 해야 합니다. 항상 켜 놓으셔야 적용 됩니다.
CLI 도구를 실행하여 템플릿 파일에서 클래스를 검색하고 CSS를 빌드하세요.
VSCODE 터미널을 열고 아래와 같이 실행하면 src폴더에 output.css가 빌드된다.
vscode 터미널
---------------------
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
5. HTML에서 Tailwind 사용 시작
컴파일된 CSS 파일을 index.html <head>에 추가하고 Tailwind의 유틸리티 클래스를 사용하여 콘텐츠 스타일을 지정하세요.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--여기에 link -->
<link href="./output.css" rel="stylesheet">
</head>
<body>
<!--class로 CSS적용 -->
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
6. Live서버 돌리면 잘 적용됩니다.
'IT' 카테고리의 다른 글
| 전자책을 서점에 유통하는 혁신적인 방법 (1) | 2024.07.07 |
|---|---|
| 나 스스로 다짐 글쓰기 습관 들이기 (0) | 2024.07.07 |
| "short" 티스토리 글감검색 (0) | 2023.12.08 |
| "shorts" 한번에 끝나는 글 요약 써머라이즈 (0) | 2023.12.07 |
| "shorts" ChatGPT 구글 확장 프로그램 (0) | 2023.11.27 |