From 38da0b137302a8402e82b11fbf3855dfb5e6e701 Mon Sep 17 00:00:00 2001 From: juliolmuller Date: Tue, 4 Feb 2025 02:03:21 -0300 Subject: [PATCH] docs: include Bun as package manager in examples --- .gitignore | 4 ++- CONTRIBUTING.md | 4 +++ documentation/html/guide/angular.mdx | 31 ++++++++++------ documentation/html/guide/django.mdx | 31 ++++++++++------ documentation/html/guide/flask.mdx | 31 ++++++++++------ documentation/html/guide/gatsby.mdx | 29 +++++++++------ documentation/html/guide/laravel.mdx | 29 +++++++++------ documentation/html/guide/meteor.mdx | 29 +++++++++------ documentation/html/guide/next.mdx | 31 ++++++++++------ documentation/html/guide/nuxt.mdx | 29 +++++++++------ documentation/html/guide/phoenix.mdx | 29 +++++++++------ documentation/html/guide/qwik.mdx | 29 +++++++++------ documentation/html/guide/react-vite.mdx | 29 +++++++++------ documentation/html/guide/remix.mdx | 29 +++++++++------ documentation/html/guide/solid.mdx | 29 +++++++++------ documentation/html/guide/svelte.mdx | 29 +++++++++------ documentation/html/guide/symfony.mdx | 29 +++++++++------ documentation/html/guide/vue-vite.mdx | 29 +++++++++------ documentation/html/installation.mdx | 26 ++++++++++---- documentation/react/guide/astro.mdx | 31 +++++++++------- documentation/react/guide/cra.mdx | 31 +++++++++------- documentation/react/guide/gatsby.mdx | 31 +++++++++------- documentation/react/guide/next.mdx | 35 +++++++++++-------- documentation/react/guide/remix.mdx | 31 +++++++++------- documentation/react/guide/vite.mdx | 29 +++++++++------ documentation/react/installation-with-cli.mdx | 3 ++ documentation/react/installation.mdx | 22 ++++++++++-- packages/create-material-tailwind/.gitignore | 4 ++- packages/create-material-tailwind/README.md | 6 ++++ .../templates/next-ts/README.md | 2 ++ .../templates/next/README.md | 2 ++ packages/material-tailwind-html/.gitignore | 5 ++- packages/material-tailwind-react/.gitignore | 5 ++- 33 files changed, 494 insertions(+), 249 deletions(-) diff --git a/.gitignore b/.gitignore index 1fa2db389..9e63781a1 100644 --- a/.gitignore +++ b/.gitignore @@ -37,4 +37,6 @@ yarn-error.log* # lock files package-lock.json yarn.lock -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml +bun.lockb +bun.lock diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 97ddd5ce7..9480df680 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -26,6 +26,10 @@ yarn dev #or npm run dev + +#or + +bun run dev ``` ## Material Tailwind Structure diff --git a/documentation/html/guide/angular.mdx b/documentation/html/guide/angular.mdx index 581ca84b6..026698379 100644 --- a/documentation/html/guide/angular.mdx +++ b/documentation/html/guide/angular.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Angular and Tail navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -36,27 +37,23 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html ``` --- - - +> ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -68,12 +65,24 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html ``` +--- +> +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + --- diff --git a/documentation/html/guide/django.mdx b/documentation/html/guide/django.mdx index 11cb4ac2a..4282d6ce5 100644 --- a/documentation/html/guide/django.mdx +++ b/documentation/html/guide/django.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Django and Tailw navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -143,7 +144,7 @@ Create an **index.html** file inside the **templates** folder that will serve as ```
-Then you need to install Tailwind CSS since @material-tailwind/html works with Tailwind CSS classes and you need to have Tailwind CSS installed on your project. +Then you need to install Tailwind CSS since @material-tailwind/html works with Tailwind CSS classes and you need to have Tailwind CSS installed on your project. ```bash npm install -D tailwindcss npx tailwindcss init @@ -151,13 +152,11 @@ npx tailwindcss init --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -165,13 +164,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -183,7 +180,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -191,6 +188,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/flask.mdx b/documentation/html/guide/flask.mdx index d07780982..889369e8e 100644 --- a/documentation/html/guide/flask.mdx +++ b/documentation/html/guide/flask.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Flask and Tailwi navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -24,7 +25,7 @@ Learn how to setup and install @material-tailwind/html with Flask.

-First you need to create a new project using Flask, for more details check the Flask Official Documentation. +First you need to create a new project using Flask, for more details check the Flask Official Documentation. Then, in the root of your project folder create a new file called **app.py** with the following content: ```js @@ -125,13 +126,11 @@ This will generate a new **output.css** file inside the `/static/dist/css/` fold --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -139,13 +138,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -157,7 +154,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -165,6 +162,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/gatsby.mdx b/documentation/html/guide/gatsby.mdx index 6515ed197..a285730e2 100644 --- a/documentation/html/guide/gatsby.mdx +++ b/documentation/html/guide/gatsby.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Gatsby and Tailw navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -36,13 +37,11 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -50,13 +49,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -68,7 +65,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -76,6 +73,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/laravel.mdx b/documentation/html/guide/laravel.mdx index 3e76eaf46..a6d79b68a 100644 --- a/documentation/html/guide/laravel.mdx +++ b/documentation/html/guide/laravel.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Laravel and Tail navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -44,7 +45,7 @@ Then you need to create the Tailwind CSS configuration file by running the follo ```bash npx tailwindcss init -p -``` +```
@@ -71,13 +72,11 @@ After setting up Tailwind CSS you need to install @material-tailwind/html as a d --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -85,9 +84,7 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: @@ -103,7 +100,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -111,6 +108,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/meteor.mdx b/documentation/html/guide/meteor.mdx index 2981e2e33..5b65ff788 100644 --- a/documentation/html/guide/meteor.mdx +++ b/documentation/html/guide/meteor.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Meteor and Tailw navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -36,13 +37,11 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -50,13 +49,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -68,7 +65,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -76,6 +73,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/next.mdx b/documentation/html/guide/next.mdx index 1e6fe9e16..059f1d354 100644 --- a/documentation/html/guide/next.mdx +++ b/documentation/html/guide/next.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Next.js and Tail navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -32,19 +33,17 @@ npx create-next-app@latest
-@material-tailwind/html is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project, Next.js provides Tailwind CSS support out of the box, so you don't need to install it manually. +@material-tailwind/html is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project, Next.js provides Tailwind CSS support out of the box, so you don't need to install it manually. If you want to install Tailwind CSS manually check the Tailwind CSS Installation for Next.js on Tailwind CSS Documentation --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -52,13 +51,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -70,7 +67,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -78,6 +75,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/nuxt.mdx b/documentation/html/guide/nuxt.mdx index ec391d6f9..8fdca80dc 100644 --- a/documentation/html/guide/nuxt.mdx +++ b/documentation/html/guide/nuxt.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Nuxt.js and Tail navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -37,13 +38,11 @@ Check ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -51,13 +50,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -69,7 +66,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -77,6 +74,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/phoenix.mdx b/documentation/html/guide/phoenix.mdx index d3350e3ae..26e4dce61 100644 --- a/documentation/html/guide/phoenix.mdx +++ b/documentation/html/guide/phoenix.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Phoenix and Tail navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -36,13 +37,11 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -50,13 +49,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -68,7 +65,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -76,6 +73,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/qwik.mdx b/documentation/html/guide/qwik.mdx index 3be6d7b0c..41979b964 100644 --- a/documentation/html/guide/qwik.mdx +++ b/documentation/html/guide/qwik.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Qwik and Tailwin navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -36,13 +37,11 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -50,13 +49,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -68,7 +65,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -76,6 +73,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/react-vite.mdx b/documentation/html/guide/react-vite.mdx index e492dc2d2..b44453eb6 100644 --- a/documentation/html/guide/react-vite.mdx +++ b/documentation/html/guide/react-vite.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Vite (React) and navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -37,13 +38,11 @@ Check ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -51,13 +50,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -69,7 +66,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -77,6 +74,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/remix.mdx b/documentation/html/guide/remix.mdx index 94597f1b2..03d492770 100644 --- a/documentation/html/guide/remix.mdx +++ b/documentation/html/guide/remix.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Remix and Tailwi navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -36,13 +37,11 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -50,13 +49,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -68,7 +65,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -76,6 +73,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/solid.mdx b/documentation/html/guide/solid.mdx index c0eda7390..a41a97394 100644 --- a/documentation/html/guide/solid.mdx +++ b/documentation/html/guide/solid.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Solid and Tailwi navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -36,13 +37,11 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -50,13 +49,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -68,7 +65,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -76,6 +73,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/svelte.mdx b/documentation/html/guide/svelte.mdx index 1a6f12f64..02a76d1c5 100644 --- a/documentation/html/guide/svelte.mdx +++ b/documentation/html/guide/svelte.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Svelte and Tailw navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -37,13 +38,11 @@ Check ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -51,13 +50,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -69,7 +66,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -77,6 +74,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/symfony.mdx b/documentation/html/guide/symfony.mdx index e03958ec9..b5c73968e 100644 --- a/documentation/html/guide/symfony.mdx +++ b/documentation/html/guide/symfony.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Symfony and Tail navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -42,13 +43,11 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w --- - ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -56,13 +55,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -74,7 +71,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -82,6 +79,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/guide/vue-vite.mdx b/documentation/html/guide/vue-vite.mdx index 02ccaac8c..a51774929 100644 --- a/documentation/html/guide/vue-vite.mdx +++ b/documentation/html/guide/vue-vite.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Vite (Vue) and T navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "example", @@ -37,13 +38,11 @@ Check ## Using NPM - Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -51,13 +50,11 @@ npm i @material-tailwind/html --- - ## Using Yarn - Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -69,7 +66,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -77,6 +74,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +yarn add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/html/installation.mdx b/documentation/html/installation.mdx index 687f2d4de..e558cc8ae 100644 --- a/documentation/html/installation.mdx +++ b/documentation/html/installation.mdx @@ -5,8 +5,10 @@ navigation: [ "quick-start", "installation", - "npm", - "yarn", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "ripple-effect", "icons", @@ -41,7 +43,7 @@ Learn how to use @material-tailwind/html components from this documentation to q Install @material-tailwind/html as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/html @@ -53,7 +55,7 @@ npm i @material-tailwind/html Install @material-tailwind/html as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/html @@ -65,7 +67,7 @@ yarn add @material-tailwind/html Install @material-tailwind/html as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/html @@ -73,6 +75,18 @@ pnpm i @material-tailwind/html --- +## Using Bun + +Install @material-tailwind/html as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/html +``` + +--- + ## TailwindCSS Configurations @@ -304,4 +318,4 @@ Framework-specific guides that cover our recommended approach to installing @mat - \ No newline at end of file + diff --git a/documentation/react/guide/astro.mdx b/documentation/react/guide/astro.mdx index f491c3a9f..28f0ac3f0 100644 --- a/documentation/react/guide/astro.mdx +++ b/documentation/react/guide/astro.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Astro and Tailwi navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "with-monorepo", "theme-provider", @@ -51,13 +52,11 @@ npx astro add react --- - ## Using NPM - Install @material-tailwind/react as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/react @@ -65,13 +64,11 @@ npm i @material-tailwind/react --- - ## Using Yarn - Install @material-tailwind/react as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/react @@ -79,13 +76,11 @@ yarn add @material-tailwind/react --- - ## Using PNPM - Install @material-tailwind/react as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/react @@ -93,6 +88,18 @@ pnpm i @material-tailwind/react --- +## Using Bun + +Install @material-tailwind/react as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/react +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/react/guide/cra.mdx b/documentation/react/guide/cra.mdx index e2a64db66..04b3fdb26 100644 --- a/documentation/react/guide/cra.mdx +++ b/documentation/react/guide/cra.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Create React App navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "with-monorepo", "theme-provider", @@ -38,13 +39,11 @@ Check ## Using NPM - Install @material-tailwind/react as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/react @@ -52,13 +51,11 @@ npm i @material-tailwind/react --- - ## Using Yarn - Install @material-tailwind/react as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/react @@ -66,13 +63,11 @@ yarn add @material-tailwind/react --- - ## Using PNPM - Install @material-tailwind/react as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/react @@ -80,6 +75,18 @@ pnpm i @material-tailwind/react --- +## Using Bun + +Install @material-tailwind/react as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/react +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/react/guide/gatsby.mdx b/documentation/react/guide/gatsby.mdx index 2c454c3a9..25d48d04a 100644 --- a/documentation/react/guide/gatsby.mdx +++ b/documentation/react/guide/gatsby.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Gatsby and Tailw navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "with-monorepo", "theme-provider", @@ -38,13 +39,11 @@ Check ## Using NPM - Install @material-tailwind/react as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/react @@ -52,13 +51,11 @@ npm i @material-tailwind/react --- - ## Using Yarn - Install @material-tailwind/react as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/react @@ -66,13 +63,11 @@ yarn add @material-tailwind/react --- - ## Using PNPM - Install @material-tailwind/react as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/react @@ -80,6 +75,18 @@ pnpm i @material-tailwind/react --- +## Using Bun + +Install @material-tailwind/react as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/react +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/react/guide/next.mdx b/documentation/react/guide/next.mdx index 41406459e..9f4d6facd 100644 --- a/documentation/react/guide/next.mdx +++ b/documentation/react/guide/next.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Next.js and Tail navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "with-server-components", "with-monorepo", @@ -38,13 +39,11 @@ If you have an existing Next.js project and need to install Tailwind CSS manuall --- - ## Using NPM - Install @material-tailwind/react as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/react @@ -52,13 +51,11 @@ npm i @material-tailwind/react --- - ## Using Yarn - Install @material-tailwind/react as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/react @@ -66,13 +63,11 @@ yarn add @material-tailwind/react --- - ## Using PNPM - Install @material-tailwind/react as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/react @@ -80,6 +75,18 @@ pnpm i @material-tailwind/react --- +## Using Bun + +Install @material-tailwind/react as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/react +``` + +--- + ## Tailwind CSS Configuration @@ -167,7 +174,7 @@ module.exports = withMT({ @material-tailwind/react comes with a theme provider that sets the default or custom theme/styles for Material Tailwind components. Wrap your entire application with the ThemeProvider component from @material-tailwind/react. The file to add this to depends on your Next.js setup: -With the App Router: app/layout +With the App Router: app/layout With the Pages Router: pages/\_app ```jsx {3, 7, 9} @@ -200,4 +207,4 @@ export default function Example() { return ; } ``` - \ No newline at end of file + diff --git a/documentation/react/guide/remix.mdx b/documentation/react/guide/remix.mdx index 6e33bde80..005504857 100644 --- a/documentation/react/guide/remix.mdx +++ b/documentation/react/guide/remix.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Remix and Tailwi navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "with-monorepo", "theme-provider", @@ -38,13 +39,11 @@ Check ## Using NPM - Install @material-tailwind/react as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/react @@ -52,13 +51,11 @@ npm i @material-tailwind/react --- - ## Using Yarn - Install @material-tailwind/react as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/react @@ -66,13 +63,11 @@ yarn add @material-tailwind/react --- - ## Using PNPM - Install @material-tailwind/react as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/react @@ -80,6 +75,18 @@ pnpm i @material-tailwind/react --- +## Using Bun + +Install @material-tailwind/react as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/react +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/react/guide/vite.mdx b/documentation/react/guide/vite.mdx index 691a2be6a..422a52c87 100644 --- a/documentation/react/guide/vite.mdx +++ b/documentation/react/guide/vite.mdx @@ -4,9 +4,10 @@ description: Learn how to use Material Tailwind components with Vite (React) and navigation: [ "installation", - "npm", - "yarn", - "pnpm", + "NPM", + "Yarn", + "PNPM", + "Bun", "tailwindcss-config", "with-monorepo", "theme-provider", @@ -38,13 +39,11 @@ Check ## Using NPM - Install @material-tailwind/react as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/react @@ -52,13 +51,11 @@ npm i @material-tailwind/react --- - ## Using Yarn - Install @material-tailwind/react as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/react @@ -70,7 +67,7 @@ yarn add @material-tailwind/react Install @material-tailwind/react as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/react @@ -78,6 +75,18 @@ pnpm i @material-tailwind/react --- +## Using Bun + +Install @material-tailwind/react as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/react +``` + +--- + ## TailwindCSS Configurations diff --git a/documentation/react/installation-with-cli.mdx b/documentation/react/installation-with-cli.mdx index 03d01d480..464e75aea 100644 --- a/documentation/react/installation-with-cli.mdx +++ b/documentation/react/installation-with-cli.mdx @@ -31,6 +31,9 @@ yarn create material-tailwind # Using PNPM pnpm create material-tailwind + +# Using Bun +bun create material-tailwind ```
diff --git a/documentation/react/installation.mdx b/documentation/react/installation.mdx index 715c6a5b0..d37a429c9 100644 --- a/documentation/react/installation.mdx +++ b/documentation/react/installation.mdx @@ -5,6 +5,10 @@ navigation: [ "quick-start", "installation", + "NPM", + "Yarn", + "PNPM", + "Bun", "frameworks-integration", "typescript", ] @@ -38,7 +42,7 @@ Learn how to use @material-tailwind/react components from this documentation to Install @material-tailwind/react as a dependency using NPM by running the following command: - + ```bash npm i @material-tailwind/react @@ -50,7 +54,7 @@ npm i @material-tailwind/react Install @material-tailwind/react as a dependency using Yarn by running the following command: - + ```bash yarn add @material-tailwind/react @@ -62,7 +66,7 @@ yarn add @material-tailwind/react Install @material-tailwind/react as a dependency using PNPM by running the following command: - + ```bash pnpm i @material-tailwind/react @@ -70,6 +74,18 @@ pnpm i @material-tailwind/react --- +## Using Bun + +Install @material-tailwind/react as a dependency using Bun by running the following command: + + + +```bash +bun add @material-tailwind/react +``` + +--- + ## TailwindCSS Configurations diff --git a/packages/create-material-tailwind/.gitignore b/packages/create-material-tailwind/.gitignore index 711fe8b77..8a7d5bd18 100644 --- a/packages/create-material-tailwind/.gitignore +++ b/packages/create-material-tailwind/.gitignore @@ -2,4 +2,6 @@ dist node_modules package-lock.json yarn.lock -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml +bun.lockb +bun.lock diff --git a/packages/create-material-tailwind/README.md b/packages/create-material-tailwind/README.md index 1fb83da95..287f06fe1 100644 --- a/packages/create-material-tailwind/README.md +++ b/packages/create-material-tailwind/README.md @@ -23,6 +23,12 @@ With PNPM: $ pnpm create material-tailwind ``` +With Bun: + +```bash +$ bun create material-tailwind +``` + Then follow the prompts! You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Material Tailwind project for Next.js, run: diff --git a/packages/create-material-tailwind/templates/next-ts/README.md b/packages/create-material-tailwind/templates/next-ts/README.md index 965a1228c..68f5b572d 100644 --- a/packages/create-material-tailwind/templates/next-ts/README.md +++ b/packages/create-material-tailwind/templates/next-ts/README.md @@ -10,6 +10,8 @@ npm run dev yarn dev # or pnpm dev +# or +bun run dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. diff --git a/packages/create-material-tailwind/templates/next/README.md b/packages/create-material-tailwind/templates/next/README.md index ca8a3a212..29bd54e31 100644 --- a/packages/create-material-tailwind/templates/next/README.md +++ b/packages/create-material-tailwind/templates/next/README.md @@ -10,6 +10,8 @@ npm run dev yarn dev # or pnpm dev +# or +bun run dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. diff --git a/packages/material-tailwind-html/.gitignore b/packages/material-tailwind-html/.gitignore index 57e73a63a..94dc348fa 100644 --- a/packages/material-tailwind-html/.gitignore +++ b/packages/material-tailwind-html/.gitignore @@ -25,4 +25,7 @@ dist-ssr # lock files package-lock.json -yarn.lock \ No newline at end of file +yarn.lock +pnpm-lock.yaml +bun.lockb +bun.lock diff --git a/packages/material-tailwind-react/.gitignore b/packages/material-tailwind-react/.gitignore index 57e73a63a..94dc348fa 100644 --- a/packages/material-tailwind-react/.gitignore +++ b/packages/material-tailwind-react/.gitignore @@ -25,4 +25,7 @@ dist-ssr # lock files package-lock.json -yarn.lock \ No newline at end of file +yarn.lock +pnpm-lock.yaml +bun.lockb +bun.lock