前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Setup React and Tailwind CSS Project with Vite

Setup React and Tailwind CSS Project with Vite

作者头像
Cellinlab
发布2023-05-17 21:02:27
3520
发布2023-05-17 21:02:27
举报
文章被收录于专栏:Cellinlab's Blog

# 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)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023/1/10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # Step by Step Guide
  • # Template
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档