[docs] Add base-vite-tailwind example repo (#36994)

mui · Jun 2, 2023 · 8b407a9 · 8b407a9
1 parent 5c729c7
commit 8b407a9
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 0 deletions.
diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js
@@ -9,5 +9,7 @@ module.exports = {
     'import/default': 'off',
     'import/no-named-as-default-member': 'off',
     'import/order': 'off',
+    // create-vite generates .jsx
+    'react/jsx-filename-extension': 'off',
   },
 };
diff --git a/examples/base-vite-tailwind/.gitignore b/examples/base-vite-tailwind/.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-vite-tailwind/README.md b/examples/base-vite-tailwind/README.md
@@ -0,0 +1,36 @@
+# Base UI - Vite.js example with Tailwind CSS
+
+[Base UI](https://mui.com/base/getting-started/overview/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components.
+
+[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):
+
+```sh
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-vite-tailwind
+cd base-vite-tailwind
+```
+
+Install dependencies:
+
+```sh
+yarn
+```
+
+Start the dev server:
+
+```sh
+yarn start
+```
+
+[Build](https://vitejs.dev/guide/build.html) a production bundle:
+
+```sh
+yarn build
+```
+
+PS: Don't forget to [optimize](https://tailwindcss.com/docs/optimizing-for-production) Tailwind CSS for production!
diff --git a/examples/base-vite-tailwind/index.html b/examples/base-vite-tailwind/index.html
@@ -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</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/base-vite-tailwind/package.json b/examples/base-vite-tailwind/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "base-vite-tailwind",
+  "private": true,
+  "version": "5.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mui/base": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@vitejs/plugin-react": "latest",
+    "autoprefixer": "latest",
+    "postcss": "latest",
+    "tailwindcss": "latest",
+    "vite": "latest"
+  }
+}
diff --git a/examples/base-vite-tailwind/postcss.config.js b/examples/base-vite-tailwind/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/base-vite-tailwind/public/vite.svg b/examples/base-vite-tailwind/public/vite.svg
diff --git a/examples/base-vite-tailwind/src/App.jsx b/examples/base-vite-tailwind/src/App.jsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+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/getting-started/overview/" className="link">
+            Base UI
+          </a>{' '}
+          is a library of unstyled React UI components which includes prebuilt components with
+          production-ready functionality, along with low-level hooks for transferring that
+          functionality to other components.
+        </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>
+  );
+}
+
+export default App;
diff --git a/examples/base-vite-tailwind/src/assets/react.svg b/examples/base-vite-tailwind/src/assets/react.svg
diff --git a/examples/base-vite-tailwind/src/main.jsx b/examples/base-vite-tailwind/src/main.jsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/base-vite-tailwind/src/styles.css b/examples/base-vite-tailwind/src/styles.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .card {
+    @apply max-w-[70ch] rounded-lg border border-gray-400 p-6 mb-6;
+  }
+
+  .link {
+    @apply border-b border-blue-700 text-blue-700 hover:border-b-2 hover:border-blue-400 hover:text-blue-500;
+  }
+}
diff --git a/examples/base-vite-tailwind/tailwind.config.js b/examples/base-vite-tailwind/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/examples/base-vite-tailwind/vite.config.js b/examples/base-vite-tailwind/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});