Merge pull request #7 from samyosm/master

Added Tailwind-like color names (#6)
crumb1e · Jan 27, 2023 · 45b8d45 · 45b8d45
2 parents 1124536 + 533d4d8
commit 45b8d45
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -36,4 +36,12 @@ You now have access to the Nord theme anywhere you would use normal tailwind col
 </div>
 ```
 
-I've stuck to the colour names set in the Nord documentation to keep things simple. Check that out [here](https://www.nordtheme.com/docs/colors-and-palettes).
+You can use the colour names set in the Nord documentation. Check that out [here](https://www.nordtheme.com/docs/colors-and-palettes).
+
+But you can also use Tailwind-like color names like below.
+```html
+<div class="bg-nord-0">
+    <p class="text-nord-5">Hello, this is some text</p>
+</div>
+```
+
diff --git a/index.js b/index.js
@@ -6,6 +6,7 @@ module.exports = plugin(function({ theme }) {
     theme: {
         extend: {
             colors: theme => ({
+                /* Classic Nord color names */
                 'nord0': '#2E3440',
                 'nord1': '#3B4252',
                 'nord2': '#434C5E',
@@ -22,7 +23,25 @@ module.exports = plugin(function({ theme }) {
                 'nord13': '#EBCB8B',
                 'nord14': '#A3BE8C',
                 'nord15': '#B48EAD',
+
+                /* Tailwind-like Nord color names */
+                'nord-0': '#2E3440',
+                'nord-1': '#3B4252',
+                'nord-2': '#434C5E',
+                'nord-3': '#4C566A',
+                'nord-4': '#D8DEE9',
+                'nord-5': '#E5E9F0',
+                'nord-6': '#ECEFF4',
+                'nord-7': '#8FBCBB',
+                'nord-8': '#88C0D0',
+                'nord-9': '#81A1C1',
+                'nord-10': '#5E81AC',
+                'nord-11': '#BF616A',
+                'nord-12': '#D08770',
+                'nord-13': '#EBCB8B',
+                'nord-14': '#A3BE8C',
+                'nord-15': '#B48EAD',
             })
         }
     }
-})
+})