설치

Tailwind CSS v4, UnoCSS를 사용하거나 빌드 단계를 전혀 사용하지 않고 CSS 전용 Frutjam UI 라이브러리를 설치합니다. 65개 이상의 액세스 가능한 구성 요소, JavaScript 없음, WCAG AA. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

설치하다

npm i -D frutjam

그런 다음 아래에서 설정과 일치하는 줄을 선택하세요. 모두가 동일한 구성 요소를 제공합니다.

순풍 CSS v4

당신은 일하는 것이 필요합니다 순풍 CSS 프로젝트, 플러스 마디 그리고 npm. Frutja에는 Tailwind 4가 ​​필요합니다.

Frutjam을 추가하세요. input.css 와 함께 @plugin 지령:

1
2

@import "tailwindcss";
@plugin "frutjam";

이것이 전체 설정입니다. 65개가 넘는 구성요소를 모두 즉시 사용할 수 있으며 Tailwind에서는 마크업에 사용되는 구성요소만 배송됩니다.

우노CSS

Frutjam은 사전 설정을 제공하므로 UnoCSS는 Tailwind 플러그인과 동일한 방식으로 사용하는 구성 요소만 생성합니다.

1
2
3
4
5
6
7

// uno.config.js
import { defineConfig, presetWind4 } from 'unocss';
import { presetFrutjam } from 'frutjam/unocss';

export default defineConfig({
  presets: [presetWind4(), presetFrutjam()],
});

모든 클래스는 Tailwind에서와 마찬가지로 작동하며 변형도 마찬가지입니다.

1
2
3

<button class="btn btn-error btn-xl">Delete</button>
<button class="md:btn-error">Red from the medium breakpoint up</button>
<div class="hover:card-primary">Fills on hover</div>

추가하다 presetAttributify() 구성 요소 이름은 속성이 되며 각 값은 해당 속성의 변형으로 처리됩니다.

1
2

<button btn="error xl">Delete</button>
<button btn="md:(error xl)">Red and large from the medium breakpoint up</button>

두 번째 줄에 필요한 transformerVariantGroup() 대괄호 구문의 경우. 다음과 같은 속성에 유의하세요. btn 유효한 HTML이 아니므로 마크업의 유효성을 검사하려면 클래스 양식이나 UnoCSS의 un- 접두사.

옵션

링크 구성 요소에는 한 줄의 구성이 필요합니다.

UnoCSS 처리 link CSS의 변형으로 :link 의사 클래스이며 기본 구분 기호에는 다음이 포함됩니다. -. 그래서 link-2xl "로 읽힌다.2xl, 방문하지 않은 경우"를 클래스 이름으로 사용하지 않고 아무 것도 생성되지 않습니다. 이 구성 요소에만 영향을 미치고 link-* 수정자.

UnoCSS에게 콜론만으로 분할하도록 지시하십시오.

1
2
3
4

export default defineConfig({
  separators: [':'],
  presets: [presetWind4(), presetFrutjam()],
});

또는 접두사를 사용하여 link 이름 앞에:

presets: [presetWind4(), presetFrutjam({ prefix: 'fj' })],   // fj-link-2xl

다른 모든 구성 요소는 영향을 받지 않습니다. link 57명 중 유사 클래스와 이름이 충돌하는 유일한 사람입니다.

유틸리티 엔진 없음

Frutjam은 Tailwind로 구축되었지만 구성 요소는 사용자 정의 속성을 읽는 일반 CSS로 컴파일됩니다. 프로젝트에서 유틸리티 엔진을 전혀 사용하지 않는 경우 플러그인 대신 스타일시트를 가져옵니다.

import 'frutjam/css';

이것이 전체 설정입니다. 모든 구성 요소 클래스가 작동하고 테마는 다음과 같이 전환됩니다. data-theme 평소대로이며 다른 것은 필요하지 않습니다. 30KB 크기로 압축되어 있으며 기본 스타일, 테마 및 65개 이상의 구성 요소를 모두 포함하고 있습니다.

대신 필요한 것만 가져오세요.

1
2
3
4

import 'frutjam/css/base';              // tokens and reset, always needed
import 'frutjam/css/components/button';
import 'frutjam/css/components/card';
import 'frutjam/css/themes/darkberry';  // optional

또는 빌드 단계가 전혀 없습니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

빌드 단계 없음

태그를 삽입하고 마크업 작성을 시작하세요. 모든 구성 요소를 제공하므로 제작용이 아닌 프로토타입이나 구축하지 않은 페이지에 사용하세요.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

동일한 페이지에서 Tailwind의 유틸리티를 실험하려면 Tailwind의 브라우저 빌드를 옆에 추가하세요.

1
2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

JavaScript 및 React: 선택사항, 필수 아님

Frutjam은 네이티브 우선 및 CSS 우선입니다. 버튼, 배지, 카드, 양식, 알림 등 대부분의 구성 요소는 JavaScript가 필요 없이 순수 HTML 및 CSS로 작동합니다. 다음과 같은 기본 HTML 요소 <dialog>, <details>, 그리고 <input type="checkbox"> 브라우저가 이미 지원하는 상호작용을 처리합니다. 모든 구성 요소는 기본적으로 WCAG AA에 액세스할 수 있으며 Django, HTMX, Laravel, React, Next.js 및 모든 스택에서 작동합니다.

소수의 구성 요소에는 기본 HTML과 동등한 기능(토스트 알림, 콤보 상자 필터링, 캐러셀 컨트롤)이 없습니다. 이러한 경우에만 Frutjam은 가벼운 선택적 도우미를 제공합니다.

바닐라 JS: frutjam/js

프레임워크에 구애받지 않는 ES 모듈 도우미가 필요한 구성 요소를 지원합니다. DOM 요소에 연결하면 프레임워크가 필요하지 않습니다.

1
2
3
4
5
6

import { createModal } from 'frutjam/js'

const modal = createModal(document.getElementById('myModal'))
modal.open()   // calls showModal()
modal.close()  // calls close()
modal.toggle()

반응 후크: frutjam/react

동일한 기본 DOM 호출을 둘러싼 얇은 React 래퍼. 각 후크는 ref 요소와 메소드에 연결하여 이를 제어할 수 있으며 React 자체 외에는 추가 종속성이 없습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { useModal } from 'frutjam/react'

export default function App() {
  const modal = useModal()
  return (
    <>
      <button onClick={modal.open}>Open</button>
      <dialog ref={modal.ref} className="modal">...</dialog>
    </>
  )
}

사용 가능 대상: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

다음 단계

설치한 후 다음을 시도해 보세요. 버튼 구성요소 Frutja의 실제 작동 모습을 보거나 전체 내용을 살펴보려면 구성 요소 라이브러리.

Frutjam의 CSS 우선 접근 방식에 대한 생각을 이해하고 싶으십니까? 우리가 왜 이런 방식으로 구축했는지 읽어보세요 →