Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[examples][base-ui] Add Base UI + Vite + Tailwind CSS example in TypeScript #37595

Merged
merged 17 commits into from
Sep 12, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions examples/base-ui-vite-tailwind-ts/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
31 changes: 31 additions & 0 deletions examples/base-ui-vite-tailwind-ts/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Base UI - Vite.js example with Tailwind CSS in TypeScript

[Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks.

[Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects, consisting of a dev server and a build command

[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level CSS classes that can be composed to build custom UI designs.

## How to use

Download the example [or clone the repo](https://github.com/mui/material-ui):

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-ui-vite-tailwind-ts
cd base-ui-vite-tailwind-ts
```

Install it and run:

```bash
npm install
npm start
```

or:

<!-- #default-branch-switch -->

[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts)
13 changes: 13 additions & 0 deletions examples/base-ui-vite-tailwind-ts/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
44 changes: 44 additions & 0 deletions examples/base-ui-vite-tailwind-ts/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{
"name": "base-ui-vite-tailwind-ts",
"private": true,
"version": "5.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@mui/base": "latest",
"react": "latest",
"react-dom": "latest"
},
"devDependencies": {
"@types/react": "latest",
"@types/react-dom": "latest",
"@typescript-eslint/eslint-plugin": "latest",
"@typescript-eslint/parser": "latest",
"@vitejs/plugin-react": "latest",
"autoprefixer": "latest",
"eslint": "latest",
"eslint-plugin-react-hooks": "latest",
"eslint-plugin-react-refresh": "latest",
"postcss": "latest",
"tailwindcss": "latest",
"typescript": "latest",
"vite": "latest"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
6 changes: 6 additions & 0 deletions examples/base-ui-vite-tailwind-ts/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
1 change: 1 addition & 0 deletions examples/base-ui-vite-tailwind-ts/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 40 additions & 0 deletions examples/base-ui-vite-tailwind-ts/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import * as React from 'react';

export default function App() {
return (
<div className="p-8">
<h1 className="text-3xl font-semibold mb-4">
Base UI + Vite.js + Tailwind CSS in TypeScript
</h1>
<ul>
<li className="card">
<a href="https://mui.com/base-ui/" className="link">
Base UI
</a>{' '}
is a library of unstyled React UI components and hooks.
</li>
<li className="card">
<a href="https://vitejs.dev/" className="link">
Vite
</a>{' '}
is a build tool that aims to provide a faster and leaner development experience for modern
web projects, consisting of a dev server and a build command.
</li>
<li className="card">
<a href="https://tailwindcss.com/" className="link">
Tailwind CSS
</a>{' '}
is a utility-first CSS framework that provides low-level CSS classes that can be composed
to build custom UI designs.
</li>
</ul>
<span>
Created with 💙 by{' '}
<a href="https://mui.com" className="link">
MUI
</a>
.
</span>
</div>
);
}
1 change: 1 addition & 0 deletions examples/base-ui-vite-tailwind-ts/src/assets/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions examples/base-ui-vite-tailwind-ts/src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
10 changes: 10 additions & 0 deletions examples/base-ui-vite-tailwind-ts/src/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
1 change: 1 addition & 0 deletions examples/base-ui-vite-tailwind-ts/src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
8 changes: 8 additions & 0 deletions examples/base-ui-vite-tailwind-ts/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
25 changes: 25 additions & 0 deletions examples/base-ui-vite-tailwind-ts/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
10 changes: 10 additions & 0 deletions examples/base-ui-vite-tailwind-ts/tsconfig.node.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
7 changes: 7 additions & 0 deletions examples/base-ui-vite-tailwind-ts/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});
2 changes: 1 addition & 1 deletion examples/base-ui-vite-tailwind/README.md
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@
Download the example [or clone the repo](https://github.com/mui/material-ui):

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-vite-tailwind
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-ui-vite-tailwind
cd base-ui-vite-tailwind
```

8 changes: 1 addition & 7 deletions examples/base-ui-vite-tailwind/src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
import * as React from 'react';

function App() {
export default function App() {
return (
<div className="p-8">
<h1 className="text-3xl font-semibold mb-4">Base UI + Vite.js + Tailwind CSS</h1>

<ul>
<li className="card">
<a href="https://mui.com/base-ui/" className="link">
Base UI
</a>{' '}
is a library of unstyled React UI components and hooks.
</li>

<li className="card">
<a href="https://vitejs.dev/" className="link">
Vite
</a>{' '}
is a build tool that aims to provide a faster and leaner development experience for modern
web projects, consisting of a dev server and a build command.
</li>

<li className="card">
<a href="https://tailwindcss.com/" className="link">
Tailwind CSS
@@ -29,7 +26,6 @@ function App() {
to build custom UI designs.
</li>
</ul>

<span>
Created with 💙 by{' '}
<a href="https://mui.com" className="link">
@@ -40,5 +36,3 @@ function App() {
</div>
);
}

export default App;