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

# Step by Step Guide

1. Create Project Folder

代码语言：javascript复制

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

cd cellinlab-home

1. Install Tailwind CSS and Other Dependencies

代码语言：javascript复制

pnpm install -D tailwindcss postcss autoprefixer

1. Generate Tailwind CSS Config File

代码语言：javascript复制

pnpx tailwindcss init -p

1. Add Tailwind CSS to PostCSS Config File

tailwind.config.js

代码语言：javascript复制

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

postcss.config.js

代码语言：javascript复制

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

1. Add Tailwind CSS to index.css

代码语言：javascript复制

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

1. Install Material-UI

代码语言：javascript复制

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

1. Init Git commitizen

代码语言：javascript复制

# 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

1. Start Development Server

代码语言：javascript复制

pnpm dev

1. Reset CSS

App.tsx

代码语言：javascript复制

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

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

1. Test Tailwind CSS and Material-UI

App.tsx

代码语言：javascript复制

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>
  );
}

react typescript environment ui vite

0 人点赞