In this section we will install & setup Preact + Typescript with Tailwind CSS 3. For this section we will use create-tw it will help to CLI to scaffold tailwindcss-ready projects. create-tw help to create simple ready template for Preact + typescript with tailwind css 3.
Create Tailwind CSS Project with Preact
Create tailwind-app with preact using npx:
npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
Create tailwind-app with preact using yarn:
yarn create tw
# OR
yearn create tw <project-name> --template <id>
Select preact project.
? 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)
Select typescript.
? What language will your project be written in? (Use arrow keys)
❯ TypeScript
JavaScript
Select code style.
? 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
Select tailwind plugin for your requirement.
? 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
Move to project and run the server
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>
);
}
Top comments (0)