diff --git a/examples/base-ui-vite-tailwind-ts/.gitignore b/examples/base-ui-vite-tailwind-ts/.gitignore new file mode 100644 index 00000000000000..a547bf36d8d11a --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/.gitignore @@ -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? diff --git a/examples/base-ui-vite-tailwind-ts/README.md b/examples/base-ui-vite-tailwind-ts/README.md new file mode 100644 index 00000000000000..65d8efe3feb3ff --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/README.md @@ -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: + + + +[![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) diff --git a/examples/base-ui-vite-tailwind-ts/index.html b/examples/base-ui-vite-tailwind-ts/index.html new file mode 100644 index 00000000000000..e0d1c840806ee7 --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +
+ + + diff --git a/examples/base-ui-vite-tailwind-ts/package.json b/examples/base-ui-vite-tailwind-ts/package.json new file mode 100644 index 00000000000000..030161a63f0991 --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/package.json @@ -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" + ] + } +} diff --git a/examples/base-ui-vite-tailwind-ts/postcss.config.js b/examples/base-ui-vite-tailwind-ts/postcss.config.js new file mode 100644 index 00000000000000..2aa7205d4b402a --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/base-ui-vite-tailwind-ts/public/vite.svg b/examples/base-ui-vite-tailwind-ts/public/vite.svg new file mode 100644 index 00000000000000..e7b8dfb1b2a60b --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/base-ui-vite-tailwind-ts/src/App.tsx b/examples/base-ui-vite-tailwind-ts/src/App.tsx new file mode 100644 index 00000000000000..d6824d2ec394fe --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/src/App.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; + +export default function App() { + return ( +
+

+ Base UI + Vite.js + Tailwind CSS in TypeScript +

+ + + Created with 💙 by{' '} + + MUI + + . + +
+ ); +} diff --git a/examples/base-ui-vite-tailwind-ts/src/assets/logo.svg b/examples/base-ui-vite-tailwind-ts/src/assets/logo.svg new file mode 100644 index 00000000000000..9dfc1c058cebbe --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/base-ui-vite-tailwind-ts/src/index.css b/examples/base-ui-vite-tailwind-ts/src/index.css new file mode 100644 index 00000000000000..b5c61c956711f9 --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/examples/base-ui-vite-tailwind-ts/src/main.tsx b/examples/base-ui-vite-tailwind-ts/src/main.tsx new file mode 100644 index 00000000000000..3a5958a5b6bffa --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/src/main.tsx @@ -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( + + + , +); diff --git a/examples/base-ui-vite-tailwind-ts/src/vite-env.d.ts b/examples/base-ui-vite-tailwind-ts/src/vite-env.d.ts new file mode 100644 index 00000000000000..11f02fe2a0061d --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/base-ui-vite-tailwind-ts/tailwind.config.js b/examples/base-ui-vite-tailwind-ts/tailwind.config.js new file mode 100644 index 00000000000000..d21f1cdae70ca5 --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/examples/base-ui-vite-tailwind-ts/tsconfig.json b/examples/base-ui-vite-tailwind-ts/tsconfig.json new file mode 100644 index 00000000000000..a7fc6fbf23de2a --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/tsconfig.json @@ -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" }] +} diff --git a/examples/base-ui-vite-tailwind-ts/tsconfig.node.json b/examples/base-ui-vite-tailwind-ts/tsconfig.node.json new file mode 100644 index 00000000000000..42872c59f5b01c --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/base-ui-vite-tailwind-ts/vite.config.ts b/examples/base-ui-vite-tailwind-ts/vite.config.ts new file mode 100644 index 00000000000000..627a3196243d37 --- /dev/null +++ b/examples/base-ui-vite-tailwind-ts/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}); diff --git a/examples/base-ui-vite-tailwind/README.md b/examples/base-ui-vite-tailwind/README.md index bfec1fa73acf56..04a40095b7b28b 100644 --- a/examples/base-ui-vite-tailwind/README.md +++ b/examples/base-ui-vite-tailwind/README.md @@ -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 ``` diff --git a/examples/base-ui-vite-tailwind/src/App.jsx b/examples/base-ui-vite-tailwind/src/App.jsx index a46a226dd02e07..3540056055ea91 100644 --- a/examples/base-ui-vite-tailwind/src/App.jsx +++ b/examples/base-ui-vite-tailwind/src/App.jsx @@ -1,10 +1,9 @@ import * as React from 'react'; -function App() { +export default function App() { return (

Base UI + Vite.js + Tailwind CSS

- - Created with 💙 by{' '} @@ -40,5 +36,3 @@ function App() {
); } - -export default App;