Skip to content

Commit 45b8d45

Browse files
authored
Merge pull request #7 from samyosm/master
Added Tailwind-like color names (#6)
2 parents 1124536 + 533d4d8 commit 45b8d45

File tree

2 files changed

+29
-2
lines changed

2 files changed

+29
-2
lines changed

README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,12 @@ You now have access to the Nord theme anywhere you would use normal tailwind col
3636
</div>
3737
```
3838

39-
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).
39+
You can use the colour names set in the Nord documentation. Check that out [here](https://www.nordtheme.com/docs/colors-and-palettes).
40+
41+
But you can also use Tailwind-like color names like below.
42+
```html
43+
<div class="bg-nord-0">
44+
<p class="text-nord-5">Hello, this is some text</p>
45+
</div>
46+
```
47+

index.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module.exports = plugin(function({ theme }) {
66
theme: {
77
extend: {
88
colors: theme => ({
9+
/* Classic Nord color names */
910
'nord0': '#2E3440',
1011
'nord1': '#3B4252',
1112
'nord2': '#434C5E',
@@ -22,7 +23,25 @@ module.exports = plugin(function({ theme }) {
2223
'nord13': '#EBCB8B',
2324
'nord14': '#A3BE8C',
2425
'nord15': '#B48EAD',
26+
27+
/* Tailwind-like Nord color names */
28+
'nord-0': '#2E3440',
29+
'nord-1': '#3B4252',
30+
'nord-2': '#434C5E',
31+
'nord-3': '#4C566A',
32+
'nord-4': '#D8DEE9',
33+
'nord-5': '#E5E9F0',
34+
'nord-6': '#ECEFF4',
35+
'nord-7': '#8FBCBB',
36+
'nord-8': '#88C0D0',
37+
'nord-9': '#81A1C1',
38+
'nord-10': '#5E81AC',
39+
'nord-11': '#BF616A',
40+
'nord-12': '#D08770',
41+
'nord-13': '#EBCB8B',
42+
'nord-14': '#A3BE8C',
43+
'nord-15': '#B48EAD',
2544
})
2645
}
2746
}
28-
})
47+
})

0 commit comments

Comments
 (0)