├── 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 | ![Demo rosePine](https://user-images.githubusercontent.com/113206761/209348212-f8acdd5c-e5ff-407b-895d-03ca557ef6a5.png) 115 | 116 | ### Rose Pine Moon 117 | ![Demo rosePineMoon](https://user-images.githubusercontent.com/113206761/209348043-e8b85de0-a368-481b-9c0a-13459cc8afe9.png) 118 | 119 | ### Rose Pine Dawn 120 | ![Demo rosePineDawn](https://user-images.githubusercontent.com/113206761/209348137-b3f2eab5-19dc-4a0c-b0f3-23cde4d9cb43.png) 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 | --------------------------------------------------------------------------------