├── readme.md
└── rose-pine-tailwind-v4
├── rose-pine-dawn.css
├── rose-pine-moon.css
└── rose-pine-pine.css
/readme.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
Rosé Pine for Tailwind CSS
4 |
5 |
6 | All natural pine, faux fur and a bit of soho vibes for the classy minimalist
7 |
8 |
9 |
10 | 
11 |
12 |
13 |
14 | ## Usage
15 |
16 |
17 | ### Tailwind 4
18 |
19 | 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).
20 |
21 | 2. Copy folder `rose-pine-tailwind-v4` to your project's stylesheet folder.
22 |
23 | 3. Update your main stylesheet with one of the Rosé Pine variants:
24 |
25 | ```css app.css
26 | @import "tailwindcss";
27 |
28 | @import "./rose-pine-tailwind-v4/rose-pine-moon.css";
29 | /* @import "./rose-pine-tailwind-v4/rose-pine-dawn.css"; */
30 | /* @import "./rose-pine-tailwind-v4/rose-pine-pine.css"; */
31 | ```
32 |
33 | 4. You can now use the Rosé Pine colours just like any other Tailwind colors:
34 |
35 | ```html
36 |
37 | Pretty nice
38 |
39 | ```
40 |
41 |
42 | ### Older Tailwind version
43 |
44 | 1. Open your app that already have [tailwind installed](https://tailwindcss.com/docs/installation) & [editor correctly setup](https://tailwindcss.com/docs/editor-setup)
45 |
46 | 2. Under `tailwind.config.*`, input the following code :
47 |
48 | ```javascript
49 | module.exports = {
50 | theme: {
51 | extend: {
52 | colors: {
53 | rosePine: {
54 | base: "#191724",
55 | surface: "#1f1d2e",
56 | overlay: "#26233a",
57 | muted: "#6e6a86",
58 | subtle: "#908caa",
59 | text: "#e0def4",
60 | love: "#eb6f92",
61 | gold: "#f6c177",
62 | rose: "#ebbcba",
63 | pine: "#31748f",
64 | foam: "#9ccfd8",
65 | iris: "#c4a7e7",
66 | highlightLow: "#21202e",
67 | highlightMed: "#403d52",
68 | highlightHigh: "#524f67",
69 | },
70 | rosePineMoon: {
71 | base: "#232136",
72 | surface: "#2a273f",
73 | overlay: "#393552",
74 | muted: "#6e6a86",
75 | subtle: "#908caa",
76 | text: "#e0def4",
77 | love: "#eb6f92",
78 | gold: "#f6c177",
79 | rose: "#ea9a97",
80 | pine: "#3e8fb0",
81 | foam: "#9ccfd8",
82 | iris: "#c4a7e7",
83 | highlightLow: "#2a283e",
84 | highlightMed: "#44415a",
85 | highlightHigh: "#56526e",
86 | },
87 | rosePineDawn: {
88 | base: "#faf4ed",
89 | surface: "#fffaf3",
90 | overlay: "#f2e9e1",
91 | muted: "#9893a5",
92 | subtle: "#797593",
93 | text: "#575279",
94 | love: "#b4637a",
95 | gold: "#ea9d34",
96 | rose: "#d7827e",
97 | pine: "#286983",
98 | foam: "#56949f",
99 | iris: "#907aa9",
100 | highlightLow: "#f4ede8",
101 | highlightMed: "#dfdad9",
102 | highlightHigh: "#cecacd",
103 | },
104 | },
105 | },
106 | },
107 | // (plugins, content, ...)
108 | };
109 | ```
110 |
111 | ## Gallery
112 |
113 | ### Rose Pine
114 | 
115 |
116 | ### Rose Pine Moon
117 | 
118 |
119 | ### Rose Pine Dawn
120 | 
121 |
122 |
123 | ## Thanks to
124 |
125 | - [Goyo Stach](https://github.com/GoyoStach)
126 |
--------------------------------------------------------------------------------
/rose-pine-tailwind-v4/rose-pine-dawn.css:
--------------------------------------------------------------------------------
1 | @theme {
2 | --color-rose-pine-base: hsl(32deg, 57%, 95%);
3 | --color-rose-pine-surface: hsl(35deg, 100%, 98%);
4 | --color-rose-pine-overlay: hsl(33deg, 43%, 91%);
5 | --color-rose-pine-muted: hsl(257deg, 9%, 61%);
6 | --color-rose-pine-subtle: hsl(248deg, 12%, 52%);
7 | --color-rose-pine-text: hsl(248deg, 19%, 40%);
8 | --color-rose-pine-love: hsl(343deg, 35%, 55%);
9 | --color-rose-pine-gold: hsl(35deg, 81%, 56%);
10 | --color-rose-pine-rose: hsl(3deg, 53%, 67%);
11 | --color-rose-pine-pine: hsl(197deg, 53%, 34%);
12 | --color-rose-pine-foam: hsl(189deg, 30%, 48%);
13 | --color-rose-pine-iris: hsl(268deg, 21%, 57%);
14 | --color-rose-pine-highlight-low: hsl(25deg, 35%, 93%);
15 | --color-rose-pine-highlight-med: hsl(10deg, 9%, 86%);
16 | --color-rose-pine-highlight-high: hsl(315deg, 4%, 80%);
17 | }
18 |
--------------------------------------------------------------------------------
/rose-pine-tailwind-v4/rose-pine-moon.css:
--------------------------------------------------------------------------------
1 | @theme {
2 | --color-rose-pine-base: hsl(246deg, 24%, 17%);
3 | --color-rose-pine-surface: hsl(248deg, 24%, 20%);
4 | --color-rose-pine-overlay: hsl(248deg, 21%, 26%);
5 | --color-rose-pine-muted: hsl(249deg, 12%, 47%);
6 | --color-rose-pine-subtle: hsl(248deg, 15%, 61%);
7 | --color-rose-pine-text: hsl(245deg, 50%, 91%);
8 | --color-rose-pine-love: hsl(343deg, 76%, 68%);
9 | --color-rose-pine-gold: hsl(35deg, 88%, 72%);
10 | --color-rose-pine-rose: hsl(2deg, 66%, 75%);
11 | --color-rose-pine-pine: hsl(197deg, 48%, 47%);
12 | --color-rose-pine-foam: hsl(189deg, 43%, 73%);
13 | --color-rose-pine-iris: hsl(267deg, 57%, 78%);
14 | --color-rose-pine-highlight-low: hsl(245deg, 22%, 20%);
15 | --color-rose-pine-highlight-med: hsl(247deg, 16%, 30%);
16 | --color-rose-pine-highlight-high: hsl(249deg, 15%, 38%);
17 | }
18 |
--------------------------------------------------------------------------------
/rose-pine-tailwind-v4/rose-pine-pine.css:
--------------------------------------------------------------------------------
1 | @theme {
2 | --color-rose-pine-base: hsl(249deg, 22%, 12%);
3 | --color-rose-pine-surface: hsl(247deg, 23%, 15%);
4 | --color-rose-pine-overlay: hsl(248deg, 25%, 18%);
5 | --color-rose-pine-muted: hsl(249deg, 12%, 47%);
6 | --color-rose-pine-subtle: hsl(248deg, 15%, 61%);
7 | --color-rose-pine-text: hsl(245deg, 50%, 91%);
8 | --color-rose-pine-love: hsl(343deg, 76%, 68%);
9 | --color-rose-pine-gold: hsl(35deg, 88%, 72%);
10 | --color-rose-pine-rose: hsl(2deg, 55%, 83%);
11 | --color-rose-pine-pine: hsl(197deg, 49%, 38%);
12 | --color-rose-pine-foam: hsl(189deg, 43%, 73%);
13 | --color-rose-pine-iris: hsl(267deg, 57%, 78%);
14 | --color-rose-pine-highlight-low: hsl(244deg, 18%, 15%);
15 | --color-rose-pine-highlight-med: hsl(249deg, 15%, 28%);
16 | --color-rose-pine-highlight-high: hsl(248deg, 13%, 36%);
17 | }
18 |
--------------------------------------------------------------------------------