Skip to content

Commit

Permalink
docs(plugins): add unocss and tailwind plugin docs
Browse files Browse the repository at this point in the history
  • Loading branch information
trobonox committed Jul 22, 2024
1 parent a7f8b79 commit 9751056
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 0 deletions.
43 changes: 43 additions & 0 deletions content/docs/plugins/tailwindcss.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
title: TailwindCSS
description: Information about the TailwindCSS plugin.
---
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

The Stein TailwindCSS plugin adds support for TailwindCSS. Just install the plugin and you are ready to go, no extra setup is required.

## Installation

<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
```bash tab="npm"
npm add -D stein-plugin-tailwindcss
```

```bash tab="yarn"
yarn add -D stein-plugin-tailwindcss
```

```bash tab="pnpm"
pnpm add -D stein-plugin-tailwindcss
```

```bash tab="bun"
bun add -D stein-plugin-tailwindcss
```
</Tabs>

## Usage

```typescript
import { defineConfig } from "@steinjs/core";
import tailwindcss from "stein-plugin-tailwindcss";

export default defineConfig({
plugins: [tailwindcss({
// options, see below
})]
});
```

## Options
> For now, there's no options available. We're trying to see what would be the best way to configure TailwindCSS in Stein. If you have any suggestions, feel free to open an issue or a pull request.
69 changes: 69 additions & 0 deletions content/docs/plugins/unocss.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
title: UnoCSS
description: Information about the UnoCSS plugin.
---
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

The Stein UnoCSS plugin adds support for UnoCSS. Just install the plugin and you are ready to go, no extra setup is required.
It is based on the [`@unocss/astro`](https://github.com/unocss/unocss/blob/main/packages/astro) integration.

## Installation

<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
```bash tab="npm"
npm add -D stein-plugin-unocss
```

```bash tab="yarn"
yarn add -D stein-plugin-unocss
```

```bash tab="pnpm"
pnpm add -D stein-plugin-unocss
```

```bash tab="bun"
bun add -D stein-plugin-unocss
```
</Tabs>

## Usage

```typescript
import { defineConfig } from "@steinjs/core";
import unocss from "stein-plugin-unocss";

export default defineConfig({
plugins: [unocss({
// options, see below
})]
});
```

If you use `injectReset: true`, make sure to also install `@unocss/reset`:

<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
```bash tab="npm"
npm add @unocss/reset
```

```bash tab="yarn"
yarn add @unocss/reset
```

```bash tab="pnpm"
pnpm add @unocss/reset
```

```bash tab="bun"
bun add @unocss/reset
```
</Tabs>

## Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `injectEntry` | `boolean` | `true` | Automatically add UnoCSS entry import in the `index.html`. |
| `injectReset` | `boolean \| string` | `false` | When passing `true`, `@unocss/reset/tailwind.css` will be used. |
| `injectExtra` | `string[]` | `[]` | Inject extra imports. |

0 comments on commit 9751056

Please sign in to comment.