KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

tailwind-css

★ 29 Open GitHub ↗

Soho vibes for Tailwind CSS

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
    <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" />
    <h2 align="center">Rosé Pine for Tailwind CSS</h2>
</p>

<p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>

## Usage

### Tailwind 4

1. Open your app that already have [tailwind installed](https://tailwindcss.com/docs/installation/using-vite) & [editor correctly setup](https://tailwindcss.com/docs/editor-setup).

2. Copy folder `rose-pine-tailwind-v4` to your project's stylesheet folder.

3. Update your main stylesheet with one of the Rosé Pine variants:

```css app.css
@import "tailwindcss";

@import "./rose-pine-tailwind-v4/rose-pine-moon.css";
/* @import "./rose-pine-tailwind-v4/rose-pine-dawn.css"; */
/* @import "./rose-pine-tailwind-v4/rose-pine-pine.css"; */
```

4. You can now use the Rosé Pine colours just like any other Tailwind colors:

```html
<div class="bg-rose-pine-base text-rose-pine-gold">
    Pretty nice
</div>
```

### Older Tailwind version

1. Open your app that already have [tailwind installed](https://tailwindcss.com/docs/installation) & [editor correctly setup](https://tailwindcss.com/docs/editor-setup)

2. Under `tailwind.config.*`, input the following code :

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        rosePine: {
          base: "#191724",
          surface: "#1f1d2e",
          overlay: "#26233a",
          muted: "#6e6a86",
          subtle: "#908caa",
          text: "#e0def4",
          love: "#eb6f92",
          gold: "#f6c177",
          rose: "#ebbcba",
          pine: "#31748f",
          foam: "#9ccfd8",
          iris: "#c4a7e7",
          highlightLow: "#21202e",
          highlightMed: "#403d52",
          highlightHigh: "#524f67",
        },
        rosePineMoon: {
          base: "#232136",
          surface: "#2a273f",
          overlay: "#393552",
          muted: "#6e6a86",
          subtle: "#908caa",
          text: "#e0def4",
          love: "#eb6f92",
          gold: "#f6c177",
          rose: "#ea9a97",
          pine: "#3e8fb0",
          foam: "#9ccfd8",
          iris: "#c4a7e7",
          highlightLow: "#2a283e",
          highlightMed: "#44415a",
          highlightHigh: "#56526e",
        },
        rosePineDawn: {
          base: "#faf4ed",
          surface: "#fffaf3",
          overlay: "#f2e9e1",
          muted: "#9893a5",
          subtle: "#797593",
          text: "#575279",
          love: "#b4637a",
          gold: "#ea9d34",
          rose: "#d7827e",
          pine: "#286983",
          foam: "#56949f",
          iris: "#907aa9",
          highlightLow: "#f4ede8",
          highlightMed: "#dfdad9",
          highlightHigh: "#cecacd",
        },
      },
    },
  },
  // (plugins, content, ...)
};
```

## Gallery

### Rose Pine
![Demo rosePine](https://user-images.githubusercontent.com/113206761/209348212-f8acdd5c-e5ff-407b-895d-03ca557ef6a5.png)

### Rose Pine Moon
![Demo rosePineMoon](https://user-images.githubusercontent.com/113206761/209348043-e8b85de0-a368-481b-9c0a-13459cc8afe9.png)

### Rose Pine Dawn
![Demo rosePineDawn](https://user-images.githubusercontent.com/113206761/209348137-b3f2eab5-19dc-4a0c-b0f3-23cde4d9cb43.png)

## Thanks to

- [Goyo Stach](https://github.com/GoyoStach)

tailwind-css

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README