DEV Community

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

Posted on • Originally published at larainfo.com

2 1

Install Tailwind CSS In Astro with Typescript

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more