Quick and dirty React - Tailwind

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:

<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:

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:

mkdir quick-react && cd quick-react

Initialize a new React project using Vite and PNPM:

pnpm create vite@latest

Choose React as the framework and follow the prompts.

Install the necessary dependencies:

pnpm install

2. Install Tailwind CSS

Tailwind CSS can be installed via PNPM. Run the following commands to install Tailwind and its dependencies:

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:

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:

@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:

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.

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

pnpm start

Happy coding!
Thx for the C4o by the cowork.