DEV Community

Cover image for Install Astro + React + Tailwind CSS
saim
saim

Posted on • Originally published at larainfo.com

Install Astro + React + Tailwind CSS

#tailwindcss #react #astro #webdev

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 astro@latest

# yarn
yarn create astro

# pnpm
pnpm create astro@latest
Enter fullscreen mode Exit fullscreen mode

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

install npm dependencies.

✔ Would you like to install npm dependencies? (recommended) … yes
Enter fullscreen mode Exit fullscreen mode

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

Move to project.

cd astro-react
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

create counter app in astro using react

Run server

npm run dev
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

abhay_yt_52a8e72b213be229 profile image

Fetch API vs Axios: Which One Should You Use for HTTP Requests in React?

Abhay Singh Kathayat -

bitontree profile image

Tailwind CSS vs Bootstrap: Which one of these is going to last in the future?

Bitontree -

aviatorscode2 profile image

Let's Build a Tool that Can Extract Information from Any Website in Seconds with AI and Proxies

Victor Yakubu -

midhunkrishnan profile image

To access terminal profile of VS Code and add commands to be run initially

Midhun Krishnan R -