Setting Up a Dev Environment with React, Vite, TypeScript, Material-UI and TailwindCSS

Cellinlab

发布于 2023-05-17 13:09:50

35600

代码可运行

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

运行总次数：0

代码可运行

# Step by Step Guide

Create Project Folder

pnpm create vite@latest cellinlab-home -- --template react-ts

cd cellinlab-home

Install Tailwind CSS and Other Dependencies

pnpm install -D tailwindcss postcss autoprefixer

Generate Tailwind CSS Config File

pnpx tailwindcss init -p

Add Tailwind CSS to PostCSS Config File

tailwind.config.js

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

postcss.config.js

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

Add Tailwind CSS to index.css

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

Install Material-UI

pnpm install @mui/material @emotion/react @emotion/styled @mui/icons-material

Init Git commitizen

# If you don't have commitizen installed globally
# pnpm install -g commitizen
# pnpm install -g cz-conventional-changelog

commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

Start Development Server

pnpm dev

Reset CSS

App.tsx

import { CssBaseline } from "@mui/material";

function App() {
  return (
    <div>
      <CssBaseline />
      <h1>Hello World</h1>
    </div>
  );
}

Test Tailwind CSS and Material-UI

App.tsx

import { CssBaseline, Button } from "@mui/material";

function App() {
  return (
    <div>
      <CssBaseline />
      <Button variant="contained" color="primary">
        Material-UI Button
      </Button>
      <p className="text-blue-500">TailwindCSS Text Color</p>
    </div>
  );
}