前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Setting Up a Dev Environment with React, Vite, TypeScript, Material-UI and TailwindCSS

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

作者头像
Cellinlab
发布于 2023-05-17 13:09:50
发布于 2023-05-17 13:09:50
35600
代码可运行
举报
文章被收录于专栏:Cellinlab's BlogCellinlab's Blog
运行总次数:0
代码可运行

# Step by Step Guide

  1. Create Project Folder
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
pnpm create vite@latest cellinlab-home -- --template react-ts

cd cellinlab-home
  1. Install Tailwind CSS and Other Dependencies
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
pnpm install -D tailwindcss postcss autoprefixer
  1. Generate Tailwind CSS Config File
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
pnpx tailwindcss init -p
  1. Add Tailwind CSS to PostCSS Config File

tailwind.config.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
  1. Add Tailwind CSS to index.css
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Install Material-UI
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
pnpm install @mui/material @emotion/react @emotion/styled @mui/icons-material
  1. Init Git commitizen
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 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
代码运行次数:0
运行
AI代码解释
复制
pnpm dev
  1. Reset CSS

App.tsx

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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>
  );
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023/3/10,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
yarn+vite+vue3+typescript 安装 tailwind
参考:https://tailwindcss.com/docs/guides/vite#vue 生成配置文件yarn tailwindcss init 重点来了:由于是typescript,所以需要将后缀js重命名为cjs。
SingYi
2023/08/23
6350
yarn+vite+vue3+typescript 安装 tailwind
用过 tailwindcss 才知道,命名真的是顶级痛点
对 tailwindcss 早有耳闻,但在我以前的观念里,tailwindcss 那简直就是开历史倒车,所谓的原子化 css,不就是早年的 bootstrap 么?我怎么可能接受这样的技术方案?
用户6901603
2024/06/07
6330
用过 tailwindcss 才知道,命名真的是顶级痛点
【玩转全栈】—— 无敌前端究极动态组件库--Inspira UI
Inspira UI 是一个设计精美、功能丰富的用户界面库,专为开发者和设计师打造,旨在加速Web应用程序的开发过程。它提供了一系列精心设计的组件,如按钮、卡片、表单元素、导航栏等,所有这些都遵循现代设计原则,并且高度可定制,使得创建独特而专业的用户体验变得轻而易举。Inspira UI 支持多种框架,包括React、Vue和Angular,确保无论使用何种技术栈都能无缝集成。其文档详尽清晰,包含大量示例和最佳实践指南,帮助新手快速上手,同时也为有经验的开发者提供了深入探索的可能性。此外,Inspira UI 强调响应式设计,保证了应用在不同设备上的完美展现,让开发者只需编写一次代码即可适配各种屏幕尺寸。无论是构建企业级应用还是个人项目,Inspira UI 都是一个值得信赖的选择。
用户11404404
2025/04/25
2700
【玩转全栈】—— 无敌前端究极动态组件库--Inspira UI
前端开发有福了,这个 78K+ star UI 库项目超精美大气!
搞前端开发的小伙伴们,肯定都被 UI 组件折磨过。样式不统一、代码又长又难维护,简直让人头秃。
永恒君
2025/02/12
1840
前端开发有福了,这个 78K+ star UI 库项目超精美大气!
哇~ css用这个框架写,也太香了吧~赶紧收藏
提到 CSS 想必每个做前端开发的没有不知道的,也没有不会用的。即使是后端开发人员也多少会一点,因为这做Web开发中最最基础的一个知识了。
用户9078190
2022/10/25
4450
哇~ css用这个框架写,也太香了吧~赶紧收藏
上手体验TailwindCSS
我是🏅有6年前端及跨平台开发经验、掘金/51CTO活跃作者、曾独立设计混开框架和重构方案并顺利落地 de 小鑫同学。 写作背景: 在热火朝天的前端框架演进的进程中,大多数的人都把目光关注到了 JavaScript / TypeScript 的身上,TailwindCSS作为最有争议但也是最受欢迎的一个 CSS 框架的产品我们也来看一下它到底好不好用,有什么优势~ 快速开始: 创建 vite + vue-ts 项目: yarn create vite 安装 Tailwind CSS 依赖: npm inst
前端小鑫同学
2022/12/26
2.5K0
上手体验TailwindCSS
一文读懂Vue3+vite引入echarts+TailwindCSS
ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
QGS
2024/02/06
8280
Vue3引入tailwindcss
Tailwind CSS 是一个为快速创建定制化 UI 组件而设计的实用型框架。与其他 CSS 框架或库不同,Tailwind CSS 组件没有预先设置好样式。可以使用 Tailwind 的低级实用类来为 CSS 元素设置样式,如 margin、flex、color 等。
QGS
2024/01/31
7250
基于vite工程规范化
ESLinteslint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具
落幕
2025/05/27
1160
基于vite工程规范化
如何使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件
创建一个 Chrome 插件是一个有趣的项目,特别是当结合使用强大的工具如 React、TypeScript、TailwindCSS 和 Vite 时
ACK
2024/09/24
9850
如何使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件
定制一个 Vue 3 模板 - 集成 Vite, Pinia, Vue Router 与 Tailwind CSS
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。 不久前,我意识到我正在用一些重复使用的后台基础模板,浪费了我一些摸鱼时间,我突然想到--为什么不把这些可重复使用的部分重新利用起来,把它们简单地堆在一个模板里呢?🤔 技术栈 这个后台模板中,用到了如下的框架或库: Vite Pinia Vue Router Tailwind CSS Vite SVG loader 前提 开始之前,首先要安装 Node.
前端小智@大迁世界
2022/09/27
2.3K0
定制一个 Vue 3 模板 - 集成 Vite, Pinia, Vue Router 与 Tailwind CSS
pnpm技术体系之:打造企业级 pnpm 开源组件
pnpm 是 performant npm(高性能的 npm),它是一款快速的,节省磁盘空间的包管理工具,同时,它也较好地支持了 workspace 和 monorepos,简化开发者在多包组件开发下的复杂度和开发流程。
南山种子外卖跑手
2023/01/12
2.3K0
pnpm技术体系之:打造企业级 pnpm 开源组件
React 应用架构实战 0x1:初始化项目和项目结构概览
在上一节中,我们看到了构建 React 应用程序时的所有挑战以及一些可以帮助我们处理这些挑战的很好的解决方案。在这一节中,我们将查看项目结构和初始化工具,这些工具构成了我们项目的良好基础。
Cellinlab
2023/05/17
1.2K0
React 应用架构实战 0x1:初始化项目和项目结构概览
Vue2 + tailwindcss 初始化
根据需要选择其他的功能插件,例如:Babel, Router, Vuex, CSS Pre-processors, Linter。
Cell
2023/07/11
8630
Panda CSS 确实很适合用来写UI库(CSS-in-JS)
在Github扒了一下作者发现 PandaCSS 其实在2023 年 3 月 Segun Adebayo 发布的《Chakra UI的未来》 一文中有提到过,只不过最近才正式发布。
HoMeTown
2023/08/23
1.3K0
Panda CSS 确实很适合用来写UI库(CSS-in-JS)
前世的五百次回眸,才换来今生的擦肩而过。大佬,您只管努力,"CSS" 交给 "它"
“做好眼前的事,才能创造出最有希望的生活和最具有价值的的人生。所有的一切都只发生于当下,过好每一天,才能找到真正的力量,发现通往幸福之路的入口,不会把握当下的人,即使有多宏伟的目标也只是夸夸其谈,如沙漠中的海市蜃楼,无法企及” ——出自《稻盛和夫给年轻人的忠告》
用户9078190
2022/10/28
5080
前世的五百次回眸,才换来今生的擦肩而过。大佬,您只管努力,"CSS" 交给 "它"
2022年3月最新Eslint + Prettier + Husky + Stylelint + Jest + CI/CD 超详细前端单元测试&amp;规范工程化工作流
由于我的示例项目使用Next.js框架构建,需要在extends中额外配置"next"。 同时个人建议配置react-hooks插件
源心锁
2022/08/12
2K0
2022年3月最新Eslint + Prettier + Husky + Stylelint + Jest + CI/CD 超详细前端单元测试&amp;规范工程化工作流
将 Tailwind CSS 与 React.js 结合的使用指南
Tailwind CSS 是一个实用为先的 CSS 框架,使开发人员能够快速构建现代且响应式的用户界面。当与 React.js 结合使用时,这两种技术协同工作,从而简化了开发过程。在本文中,我们将探讨如何将 Tailwind CSS 无缝集成到 React.js 项目中。
泽霖
2023/11/12
5.1K0
从文档开发框架到package.json,带你走一轮React组件库构建与发布
近期我正在尝试完成所谓的「拐角轮播」,目前稍有收获(虽然拐角部分完成的并不是很好)
源心锁
2022/09/21
4.1K0
从文档开发框架到package.json,带你走一轮React组件库构建与发布
Tailwind CSS那些事儿
在回望过去,展望未来- 2024 React 生态一览表中讲到CSS时,我们提到过Tailwind CSS,并且也说会有相关的文章。
前端柒八九
2023/11/17
8650
Tailwind CSS那些事儿
推荐阅读
相关推荐
yarn+vite+vue3+typescript 安装 tailwind
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档