DEV Community

Cover image for Install Tailwind CSS In Astro with Typescript
saim
saim

Posted on • Originally published at larainfo.com

Install Tailwind CSS In Astro with Typescript

#tailwindcss #astro #typescript #webdev

In this section we will install & setup Astro + Typescript with Tailwind CSS 3. For this section we will use create-tw it will help to CLI to scaffold tailwindcss-ready projects. Astro is an all-in-one web framework for building fast, content-focused websites.
view

Features Astro
1.Component Islands: A new web architecture for building faster websites.

2.Server-first API design: Move expensive hydration off of your users’ devices.

  1. Zero JS, by default: No JavaScript runtime overhead to slow you down.

4.Edge-ready: Deploy anywhere, even a global edge runtime like Deno or Cloudflare.

5.Customizable: Tailwind, MDX, and 100+ other integrations to choose from.

6.UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more.

Create Tailwind CSS Project with Astro

Create tailwind-app with astro using npx:

npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
Enter fullscreen mode Exit fullscreen mode

Create tailwind-app with astro using yarn:

yarn create tw
# OR
yearn create tw <project-name> --template <id>
Enter fullscreen mode Exit fullscreen mode

Select astro project.
ailwind css in astro with typescript project

Select typescript with astro.

? Project name astro-tailwind
? App type Astro (create-astro)
tid astro
? What language will your project be written in? (Use arrow keys)
❯ TypeScript 
 JavaScript
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Select tailwind plugin.

? 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
Enter fullscreen mode Exit fullscreen mode

Select npm dependencies, git initialize.

✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … no
Enter fullscreen mode Exit fullscreen mode

Choose typescript setup method in astro.

? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
  Relaxed
❯  Strict (recommended) - Enable `strict` typechecking rules
  Strictest
  I prefer not to use TypeScript
Enter fullscreen mode Exit fullscreen mode

Move to project and run server.

cd astro-tailwind
npm run dev
Enter fullscreen mode Exit fullscreen mode

src/pages/index.astro

---
// Component Imports
import Button from '../components/Button.astro';

// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro + TailwindCSS</title>
    </head>

    <body>
        <div class="grid place-items-center h-screen content-center">
            <Button>Tailwind Button in Astro!</Button>
            <a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

astro with tailwind css typescript

Top comments (0)

Read next

vladyusha profile image

What’s New in React 19? A Quick Guide with Code Examples

Vladyusha -

tingwei628 profile image

Deploying Traefik Proxy with Cloudflare Origin CA Certificate on k0s

Tingwei -

carban profile image

The All-in-One Fake API for developers.

carban -

nixcko profile image

Cómo empezar con TypeScript usando Vite: Configuración y compilación simplificadas 🎯

Israel Morales -