몇 가지 간단한 단계로 newtil-css를 시작할 수 있습니다
Node.js 프로젝트에서 사용하는 가장 일반적인 방법입니다.
프로젝트 디렉토리에서 위 명령어를 실행하세요.
npm install newtil-css프로젝트의 메인 CSS 파일이나 JavaScript 진입점에서 import합니다.
import 'newtil-css/dist/newtil.css';이제 HTML에서 newtil-css 클래스를 사용할 수 있습니다.
<div class="flex items-center justify-center">
<h1 class="text-4xl font-bold">Hello, newtil-css!</h1>
</div>빠르게 시작하고 싶거나 빌드 도구를 사용하지 않는 경우에 적합합니다.
HTML의 <head> 태그 안에 위 링크를 추가하세요.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/newtil-css@latest/dist/newtil.css"
/>이제 클래스를 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/newtil-css@latest/dist/newtil.css">
</head>
<body>
<div class="flex items-center justify-center min-h-screen">
<h1 class="text-4xl font-bold text-blue-600">
Hello, newtil-css!
</h1>
</div>
</body>
</html>yarn 패키지 매니저를 사용하는 경우입니다.
프로젝트 디렉토리에서 위 명령어를 실행하세요.
yarn add newtil-css프로젝트의 메인 CSS 파일이나 JavaScript 진입점에서 import합니다.
import 'newtil-css/dist/newtil.css';pnpm 패키지 매니저를 사용하는 경우입니다.
프로젝트 디렉토리에서 위 명령어를 실행하세요.
pnpm add newtil-css프로젝트의 메인 CSS 파일이나 JavaScript 진입점에서 import합니다.
import 'newtil-css/dist/newtil.css';// app/layout.tsx 또는 pages/_app.tsx
import 'newtil-css/dist/newtil.css';
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}// src/index.js 또는 src/App.js
import React from 'react';
import 'newtil-css/dist/newtil.css';
function App() {
return <div className="flex items-center">Hello</div>;
}// src/main.js
import { createApp } from 'vue';
import 'newtil-css/dist/newtil.css';
import App from './App.vue';
createApp(App).mount('#app');<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/newtil-css@latest/dist/newtil.css">
</head>
<body>
<div class="flex items-center">Hello</div>
</body>
</html>