install astro + react + tailwind css

In this section we will install ReactJS in Astro. Astro is an all-in-one web framework for building fast, content-focused websites. Astro also support reactjs. For UI we will use Tailwind CSS because astro easily integrate Tailwind CSS.


Tools Use

Astro

Tailwind CSS (@astrojs/tailwind)

React (@astrojs/react)


Create Astro Project

Create Astro with the Automatic CLI.

# npm
npm create [email protected]

# yarn
yarn create astro

# pnpm
pnpm create [email protected]


Give project name and select astro template.

✔ Where would you like to create your new project? … astro-react
? Which template would you like to use? › - Use arrow-keys. Return to submit.
  Just the basics (recommended)
  Blog
  Portfolio
  Documentation Site
 ❯  Empty project

install npm dependencies.

✔ Would you like to install npm dependencies? (recommended) … yes

Select typescript.

? 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


Move to project.

cd astro-react


Install Tailwind CSS in Astro

install tailwind css in astro using @astrojs/tailwind

# Using NPM
npm run astro add tailwind
# Using Yarn
yarn astro add tailwind
# Using PNPM
pnpm astro add tailwind


Install React JS in Astro

install react in astro using @astrojs/react

# Using NPM
npx astro add react
# Using Yarn
yarn astro add react
# Using PNPM
pnpm astro add react


Use React in Astro

In Astro using react is very simple. you need just need to create react jsx components and import astro file.

Counter App in Astro with React

First you need to create components folder and create Counter.jsx

components/Counter.jsx

astro react folder structure


Create react counter using useState hook in astro.

src/components/Counter.jsx

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex items-center justify-center gap-x-12">
      <button onClick={() => setCount((count) => count + 1)} className="px-4 py-2 text-white bg-indigo-600 rounded-md">
        Increment
      </button>
      <p>{count}</p>
      <button onClick={() => setCount((count) => count - 1)} className="px-4 py-2 text-white bg-red-600 rounded-md">
        Decrement
      </button>
    </div>
  );
}


Import React counter component in astro file.

src/pages/index.astro

---
import Counter from '../components/Counter.jsx';
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro with React</title>
  </head>
  <body>
    <div class="flex flex-col items-center justify-center h-screen">
      <h1 class="mb-2 text-2xl text-yellow-700">Install ReactJS in Astro with Tailwind CSS</h1>
      <Counter client:load />
    </div>
  </body>
</html>
create counter app in astro using react


Run server

npm run dev