Quick and dirty React - Tailwind
Tags: frontend, webdev, javascript, beginners
Published: 2024-06-05 13:42:14

> Getting Started with Tailwind CSS, PNPM, Vite, and Theme Management

In today's fast-paced development world, efficiency is key. Whether you're working on a quick prototype or setting up a new project, having the right tools can make a huge difference. I'll walk you through setting up a React project with Tailwind CSS, managed by PNPM, bundled with Vite, and equipped with a custom hook for theme management. This setup is not only efficient but also incredibly fast. My real application which is based on this setup are hot reload under 400ms!

Also the right use of Tailwind are eliminate the CSS, and layout is clear a place where it is belong, like:
```html
<section class="grid gap-2">
  <p>Vertical content</p>
  <p>with equal spaces between</p>
  <p>Even in pure HTML with Tailwind</p>
</section>
```

*this way of work with Taiwind are work with any framework or without also*

## Why This Stack?
- React: A powerful library for building user interfaces.
- Tailwind CSS: A utility-first CSS framework that allows for rapid UI development.
- PNPM: A fast, disk space-efficient package manager.
- Vite: A next-generation frontend tooling for fast development and hot module replacement.

> Bonus is Custom Theme Management: Easily switch between light and dark modes.

Let's dive in!

## Prerequisites
Before we start, make sure you have the following installed:

- Node.js and npm
- PNPM
- Vite

You can install PNPM globally using npm:

```sh
npm install -g pnpm
```

## Setting Up the Project
1. Initialize the React Project with Vite and PNPM
First, create a new directory for your project and navigate into it:

```sh
mkdir quick-react && cd quick-react
```
## Initialize a new React project using Vite and PNPM:

```sh
pnpm create vite@latest
```

Choose React as the framework and follow the prompts.

### Install the necessary dependencies:

```sh
pnpm install
```
## 2. Install Tailwind CSS
Tailwind CSS can be installed via PNPM. Run the following commands to install Tailwind and its dependencies:

```sh
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

This will create a tailwind.config.js file and a postcss.config.js file.

## Configure Tailwind CSS
Update the tailwind.config.js file to include the paths to all of your components:

```javascript
module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

Next, update the src/index.css file to include the Tailwind directives:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Add Theme Management Hook
Create a hooks directory inside the src directory, and within it, create a useDarkLightTheme.js file with the following content:

```javascript
import { useState, useEffect, useCallback } from "react";

export const Theme = {
  LIGHT: "light",
  DARK: "dark"
}

export const useDarkLightTheme = () => {
  const [theme, setTheme] = useState(Theme.DARK);

  useEffect(() => {
    (theme === Theme.DARK)
      ? document.documentElement.classList.add(Theme.DARK)
      : document.documentElement.classList.remove(Theme.DARK);
  }, [theme]);

  const switchTheme = useCallback(() => setTheme(
    (theme) =>
      (theme === Theme.DARK)
        ? Theme.LIGHT
        : Theme.DARK
  ), []);

  return { theme, switchTheme, setTheme }
}
```

## Example MainFrame Component
This Component I used my code to solve the theme switching. 

```javascript
import { useEffect } from "react";
import { Theme, useDarkLightTheme } from "../hooks/useDarkLightTheme";

export const MainFrame = ({ children }) => {
  const { theme, setTheme, switchTheme } = useDarkLightTheme();
  useEffect(() => { setTheme(Theme.DARK); }, [setTheme]);

  return (
    <main className="dark:bg-zinc-800 dark:text-white min-h-screen">
      <button
        className="fixed right-0 p-2 m-2 rounded-lg dark:bg-black bg-white opacity-70 z-20"
        onClick={() => switchTheme()}>
          {theme}
      </button>
      <section className="m-auto max-w-screen-md">
        {children}
      </section>
    </main>
  );
}
```

## Finally

start working by

```sh
pnpm start
```

Happy coding! 
*Thx for the C4o by the cowork.*