Install Astro + React + Tailwind CSS
Tags: tailwindcss, react, astro, webdev
Published: 2022-09-21 06:53:14

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.
```sh
# npm
npm create astro@latest

# yarn
yarn create astro

# pnpm
pnpm create astro@latest
```

Give project name and select astro template.
```react
✔ 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.
```sh
✔ Would you like to install npm dependencies? (recommended) … yes
```
Select typescript.
```react
? 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.
```sh
cd astro-react
```

### Install Tailwind CSS in Astro
install tailwind css in astro using @astrojs/tailwind
```sh
# 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.
```sh
# 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](https://demo.larainfo.com/screenshot/astro/astro-react-folder.png)

Create react counter using useState hook in astro. 
_src/components/Counter.jsx_
```react
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_
```html
---
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](https://demo.larainfo.com/screenshot/astro/counter-app-in-astro-using-react.png)

Run server
```sh
npm run dev
```