Preact에 Tailwind CSS 설치

이 섹션에서는 Tailwind CSS 3을 사용하여 Preact + Typescript를 설치 및 설정합니다. 이 섹션에서는 CLI가 tailwindcss-ready 프로젝트를 스캐폴딩하는 데 도움이 되는 create-tw를 사용할 것입니다. create-tw 도움말은 tailwind css 3을 사용하여 Preact + typescript를 위한 간단한 준비된 템플릿을 생성합니다.

Preact로 Tailwind CSS 프로젝트 만들기

npx를 사용하여 preact로 tailwind-app 만들기:

npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>

Yarn을 사용하여 preact로 tailwind-app 만들기:

yarn create tw
# OR
yearn create tw <project-name> --template <id>

사전 프로젝트를 선택합니다.

? Project name tailwind-preact
? App type 
 Next.js (create-next-app) 
 Vanilla (create-vite) 
 React (create-vite) 
 Vue (create-vite) 
 Astro (create-astro) 
 Svelte Kit (create-svelte) 
❯ Preact (create-vite) 
 Solid (degit solidjs/templates/js)

타이프스크립트를 선택합니다.

? What language will your project be written in? (Use arrow keys)
❯ TypeScript 
 JavaScript 

코드 스타일을 선택합니다.

? Which dependencies would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ prettier
 ◯ clsx
 ◯ tailwind-merge

요구 사항에 맞는 tailwind 플러그인을 선택하십시오.

? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ @tailwindcss/typography
 ◯ @tailwindcss/forms
 ◯ @tailwindcss/aspect-ratio
 ◯ @tailwindcss/line-clamp
 ◯ daisyui
 ◯ prettier-plugin-tailwindcss 

프로젝트로 이동 및 서버 실행

cd tailwind-preact
npm run dev

src/app.tsx

export function App() {
  return (
    <header className="flex flex-col h-screen p-20 text-white bg-gradient-to-b from-gray-900 to-slate-800">
      <h1 className="mb-2 text-5xl font-bold text-center">Create Tailwind with Preact</h1>
      <p className="mb-6 text-xl text-center">
        If you like this project, consider giving it a star on GitHub!
      </p>
      <div className="flex flex-row items-center justify-center gap-4">
        <a
          className="font-bold text-indigo-300 github-button"
          href="https://github.com/andrejjurkin/create-tailwind-app"
          data-color-scheme="no-preference: dark; light: dark; dark: dark;"
          data-icon="octicon-star"
          data-size="large"
          data-show-count="true"
          aria-label="Star andrejjurkin/create-tailwind-app on GitHub"
        >
          Star
        </a>
        <a
          className="font-bold text-indigo-300 github-button"
          href="https://github.com/andrejjurkin/create-tailwind-app/discussions"
          data-color-scheme="no-preference: dark; light: dark; dark: dark;"
          data-icon="octicon-comment-discussion"
          data-size="large"
          aria-label="Discuss andrejjurkin/create-tailwind-app on GitHub"
        >
          Discuss
        </a>
      </div>
    </header>
  );
}