Setup React and Tailwind CSS Project with Vite

2023-05-17 21:02:27 浏览数 (3)

# Step by Step Guide

  1. Create Project Folder
代码语言：javascript复制
pnpx create vite@latest my-vite-app -- --template react

cd my-vite-app

  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

index.css

代码语言：javascript复制
@tailwind base;
@tailwind components;
@tailwind utilities;

  1. Start Development Server
代码语言：javascript复制
pnpm dev

  1. Build for Production
代码语言：javascript复制
pnpm build

# Template

React Vite App (opens new window)

react css config project vite

0 人点赞