🎨Newtil CSS

CSS 속성명 그대로,
더 직관적인 스타일링

Tailwind를 넘어서는 새로운 CSS 유틸리티 라이브러리.
Component First, Utility Last 철학으로
Material 3 디자인을 완벽 지원합니다.

시작하기GitHub
example.html
<button class="m3-btn btn-color:main-1"> 
  <span class="m3-icon icon:rocket">rocket</span>
  시작하기
</button>

주요 특징

Newtil CSS가 제공하는 6가지 핵심 기능

💻

CSS 속성명 100% 일치

CSS 속성을 그대로 클래스명으로 사용하여 학습 곡선 최소화
🎨

Material 3 완벽 지원

Google Material Design 3 가이드라인을 정확히 구현한 컴포넌트
📦

Component First, Utility Last

의미 있는 컴포넌트 우선, 세부 조정은 유틸리티로
🎛️

CSS 변수 기반 커스터마이징

변수값만 변경하면 전체 테마가 일관되게 변경
🌓

다크모드 자동 지원

prefers-color-scheme으로 자동 다크모드 전환
🔲

Google Icons 내장

Material Icons를 간편하게 클래스로 사용

왜 Newtil인가?

Tailwind와 비교해보세요

❌ Tailwind
html
<div class="flex justify-center items-center gap-4 p-6 rounded-lg bg-slate-100">
✅ Newtil CSS
html
<div class="d:flex jc:center ai:center gap:4 p:6 bd-radius:lg bg:base-1">

CSS 속성을 그대로 사용하여 더 직관적입니다

❌ Tailwind
html
<button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
  버튼
</button>
✅ Newtil CSS
html
<button class="m3-btn btn-color:main-1">버튼</button>

컴포넌트 클래스 하나로 충분합니다

❌ Tailwind
html
/* CSS를 알면 바로 사용 가능 */
display: flex;      → d:flex
justify-content     → jc:
align-items         → ai:
padding             → p:
margin              → m:
✅ Newtil CSS
html
/* CSS를 알면 바로 사용 가능 */
display: flex;      → d:flex
justify-content     → jc:
align-items         → ai:
padding             → p:
margin              → m:

순수 CSS 지식이 그대로 활용됩니다

우리의 철학

Newtil CSS가 추구하는 가치

CSS를 잊지 않는다

Tailwind를 쓰다 보면 CSS 속성명을 잊어버립니다. Newtil은 CSS 표준을 그대로 반영하여 웹 개발자의 기본기를 지킵니다.

컴포넌트가 먼저다

버튼 하나에 10개의 클래스? Newtil은 `m3-btn` 하나로 충분합니다. 세부 조정이 필요할 때만 유틸리티를 사용하세요.

커스터마이징은 간단하게

CSS 변수 하나만 바꾸면 전체 테마가 변경됩니다. 복잡한 설정 파일 없이, 순수 CSS의 힘을 활용합니다.

빠른 시작

몇 분 안에 Newtil CSS를 시작하세요

html
<!-- CSS -->
<link href="https://unpkg.com/newtil-css@latest/dist/style.css" rel="stylesheet" />

<!-- JavaScript (선택사항) -->
<script src="https://unpkg.com/newtil-css@latest/dist/script.js"></script>
bash
npm install newtil-css
html
<!DOCTYPE html>
<html lang="ko">
<head>
  <link href="https://unpkg.com/newtil-css@latest/dist/style.css" rel="stylesheet" />
</head>
<body>
  <div class="m3-layout">
    <button class="m3-btn btn-color:main-1">
      <span class="m3-icon icon:rocket">rocket</span>
      시작하기
    </button>
  </div>
</body>
</html>
전체 문서 보기 →