Try Vite + React + Tailwind CSS

#react #tailwindcss

Intro

This time, I will try creating a React application by Vite.
And I will also try using Tailwind CSS.

react-sample - GitHub

Creating a React project

First, I will create a React project using Vite by following the "Getting Started".

Getting Started - Vite

npm create vite@latest my-react-app -- --template react-ts

After creating the project, I will install Tailwind CSS, PostCSS, autoprefixer.

To use TailWind CSS, I should execute "npx tailwindcss init" and add "postcss.config.js".

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

And I change the "tailwind.config.js" like below.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

After that, I also need to add these three rows into "index.css".

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

...

To avoid "Unknown at rule @tailwind" on VSCode, I should install "Tailwind CSS IntelliSense" and add "Files: Associations" into VSCode settings.

warning

settings.json

After installing, I can write like below.

App.tsx

import "./App.css";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Link
} from "react-router-dom";
import { IndexPage } from "./IndexPage";

function App() {
  return (
    <>
      <div className="w-full h-screen flex flex-col items-center justify-center">
        <div className="w-[86%] h-[90%] bg-[green]">
          <Router>
            <Link to="/">TOP</Link>
            <Routes>
              <Route path="/" element={<IndexPage />} />
            </Routes>
          </Router>
        </div>
      </div>     
    </>
  )
}

export default App

Environmental variables

I can use environmental variables by ".env", ".env.development(for development)", and ".env.production(for production)".
In Vite projects, variable names have to be prefixed with "VITE_".

.env

VITE_SERVER_APP_URL="http://localhost:3000"

I can get the value like below.

Index.page.tsx

import "./IndexPage.css";
import { useEffect, useState } from "react";

export function IndexPage(): JSX.Element {
  useEffect(() => {
    fetch(`${import.meta.env.VITE_SERVER_APP_URL}/pointclouds`, {
      mode: "cors",
      method: "GET"
    }).then(res => res.json())
    .then(res => console.log(res))
    .catch(err => console.error(err));
  }, []);
...
}
export default IndexPage;