Skip to content

Include Bun as package manager in examples #868

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.

Sign up for GitHub

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

Open
juliolmuller wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Include Bun as package manager in examples #868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,6 @@ yarn-error.log*
# lock files
package-lock.json
yarn.lock
pnpm-lock.yaml
pnpm-lock.yaml
bun.lockb
bun.lock
4 changes: 4 additions & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ yarn dev
#or

npm run dev

#or

bun run dev
```

## Material Tailwind Structure
Expand Down
31 changes: 20 additions & 11 deletions documentation/html/guide/angular.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -36,27 +37,23 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w

---

<DocsTitle href="npm">
## Using NPM
</DocsTitle>

Install @material-tailwind/html as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />
<span id="NPM" className="scroll-mt-48" />

```bash
npm i @material-tailwind/html
```

---

<DocsTitle href="yarn">
>
## Using Yarn
</DocsTitle>

Install @material-tailwind/html as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />
<span id="Yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/html
Expand All @@ -68,12 +65,24 @@ yarn add @material-tailwind/html

Install @material-tailwind/html as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />
<span id="PNPM" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/html
```

---
>
## Using Bun

Install @material-tailwind/html as a dependency using Bun by running the following command:

<span id="Bun" className="scroll-mt-48" />

```bash
bun add @material-tailwind/html
```

---

<DocsTitle href="tailwindcss-config">
Expand Down
31 changes: 20 additions & 11 deletions documentation/html/guide/django.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -143,35 +144,31 @@ Create an **index.html** file inside the **templates** folder that will serve as
```
<br />

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
```

---

<DocsTitle href="npm">
## Using NPM
</DocsTitle>

Install @material-tailwind/html as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />
<span id="NPM" className="scroll-mt-48" />

```bash
npm i @material-tailwind/html
```

---

<DocsTitle href="yarn">
## Using Yarn
</DocsTitle>

Install @material-tailwind/html as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />
<span id="Yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/html
Expand All @@ -183,14 +180,26 @@ yarn add @material-tailwind/html

Install @material-tailwind/html as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />
<span id="PNPM" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/html
```

---

## Using Bun

Install @material-tailwind/html as a dependency using Bun by running the following command:

<span id="Bun" className="scroll-mt-48" />

```bash
bun add @material-tailwind/html
```

---

<DocsTitle href="tailwindcss-config">
## TailwindCSS Configurations
</DocsTitle>
Expand Down
31 changes: 20 additions & 11 deletions documentation/html/guide/flask.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -24,7 +25,7 @@ Learn how to setup and install @material-tailwind/html with Flask.
<br />
<br />

First you need to create a new project using Flask, for more details check the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://flask.palletsprojects.com/en/2.1.x/installation/?ref=material-tailwind">Flask Official Documentation</a>.
First you need to create a new project using Flask, for more details check the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://flask.palletsprojects.com/en/2.1.x/installation/?ref=material-tailwind">Flask Official Documentation</a>.
Then, in the root of your project folder create a new file called **app.py** with the following content:

```js
Expand Down Expand Up @@ -125,27 +126,23 @@ This will generate a new **output.css** file inside the `/static/dist/css/` fold

---

<DocsTitle href="npm">
## Using NPM
</DocsTitle>

Install @material-tailwind/html as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />
<span id="NPM" className="scroll-mt-48" />

```bash
npm i @material-tailwind/html
```

---

<DocsTitle href="yarn">
## Using Yarn
</DocsTitle>

Install @material-tailwind/html as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />
<span id="Yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/html
Expand All @@ -157,14 +154,26 @@ yarn add @material-tailwind/html

Install @material-tailwind/html as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />
<span id="PNPM" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/html
```

---

## Using Bun

Install @material-tailwind/html as a dependency using Bun by running the following command:

<span id="Bun" className="scroll-mt-48" />

```bash
bun add @material-tailwind/html
```

---

<DocsTitle href="tailwindcss-config">
## TailwindCSS Configurations
</DocsTitle>
Expand Down
29 changes: 19 additions & 10 deletions documentation/html/guide/gatsby.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -36,27 +37,23 @@ Then you need to install Tailwind CSS since @material-tailwind/html is working w

---

<DocsTitle href="npm">
## Using NPM
</DocsTitle>

Install @material-tailwind/html as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />
<span id="NPM" className="scroll-mt-48" />

```bash
npm i @material-tailwind/html
```

---

<DocsTitle href="yarn">
## Using Yarn
</DocsTitle>

Install @material-tailwind/html as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />
<span id="Yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/html
Expand All @@ -68,14 +65,26 @@ yarn add @material-tailwind/html

Install @material-tailwind/html as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />
<span id="PNPM" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/html
```

---

## Using Bun

Install @material-tailwind/html as a dependency using Bun by running the following command:

<span id="Bun" className="scroll-mt-48" />

```bash
bun add @material-tailwind/html
```

---

<DocsTitle href="tailwindcss-config">
## TailwindCSS Configurations
</DocsTitle>
Expand Down
Loading