How to add Nord theme to Tailwind

Nord is a colorscheme that describes itself as an arctic, north-bluish color palette for a comfortable, yet colorful ambiance. It was created to be clear, uncluttered, and elegant, following a minimal and flat style pattern.

It’s typically used for syntax highlighting, but Nord has since been used to build modern user interfaces. Including web and native apps. It’s also particularly popular in the ricing community for desktop environment styling.

Nord’s popularity has encouraged dozens of ports in various CSS themes and frameworks. And in this case, we’re adding the Nord theme to Tailwind CSS.

All of our examples have an accompanying Tailwind Play link for you to use and experiment with!

Adding Nord to Tailwind’s colors

If you’re a little familiar with Tailwind, you might be tempted to just use arbitrary values to use Nord’s colors (or any other colors you might want).

<!-- Set the background color to nord0 -->
<body class="bg-[#2E3440]">
  <!-- your body content -->
</body>

For prototyping and one-off usage it’s an ideal way of using colors outside of the base Tailwind color palette. However, for more frequent use, adding the named colorscheme is much better - you won’t have to copy / paste the values each time, and having named colors from the palette improves readability. On top of that, if you’re using a Tailwind extension in your IDE, it will start offering the named palette as options in autocomplete. It’s the best option if you’re committed to the colorscheme.

Of course, the first thing you need is to have Tailwind installed. We’re going to skip over the installation process since that is covered in the offical Tailwind docs. And most people wanting a different colorscheme have likely used Tailwind before.

With Tailwind installed, we can now add Nord’s colors. There are two methods we’ll be demonstrating.

Method 1 - replacing the default palette

The first method replaces the default Tailwind palette with a user-defined palette (Nord, of course).

In your tailwind.config.js file, simply add Nord’s colors to the colors: section within the theme.

theme: {
  colors: {
    nord0: '#2E3440',
    nord1: '#3B4252',
    nord2: '#434C5E',
    nord3: '#4C566A',
    nord4: '#D8DEE9',
    nord5: '#E5E9F0',
    nord6: '#ECEFF4',
    nord7: '#8FBCBB',
    nord8: '#88C0D0',
    nord9: '#81A1C1',
    nord10: '#5E81AC',
    nord11: '#BF616A',
    nord12: '#D08770',
    nord13: '#EBCB8B',
    nord14: '#A3BE8C',
    nord15: '#B48EAD',
  },
},

This allows you to use Nord’s colors using their names - nord0 through nord15 - as described in Nord’s colors doc.

Instead of the arbitrary value we used before, our example body background now looks like this:

<body class="bg-nord0">
  <!-- your body content -->
</body>

But you should be conscious that using this method completely replaces Tailwind’s default color palette. Meaning that if you want to use colors like white, black, transparent, and so on, you will have to add them manually:

theme: {
  colors: {
    white: '#FFFFFF',
    black: '#000000',
    transparent: 'transparent',
    current: 'currentColor',
    nord0: '#2E3440',
    nord1: '#3B4252',
    nord2: '#434C5E',
    nord3: '#4C566A',
    nord4: '#D8DEE9',
    nord5: '#E5E9F0',
    nord6: '#ECEFF4',
    nord7: '#8FBCBB',
    nord8: '#88C0D0',
    nord9: '#81A1C1',
    nord10: '#5E81AC',
    nord11: '#BF616A',
    nord12: '#D08770',
    nord13: '#EBCB8B',
    nord14: '#A3BE8C',
    nord15: '#B48EAD',
  },
},

Here’s our Tailwind Play utilizing this method, showing the Nord palette.

Method 2 - extending Tailwind’s palette

There’s an alternative way of adding the theme colors that allows you to keep using Tailwind’s default palette if you want - extending the existing palette.

And since we’re extending the palette, we’re going to keep the classname syntax as close to Tailwind’s default as possible.

To do that, we’re going to group the colors together under the Nord name using color object syntax. This is typically used for shades of a single color (as in the default Tailwind color palette). But in this case, we’re using it to group shades as well as the additional colors that the Nord theme uses.

Again, in your tailwind.config.js file, we’re going to use extend to add the Nord theme to our available palette. Then add the theme colors to the colors: section. This time, the colors are nested using the color object syntax under the ‘nord’ name.

theme: {
  extend: {
    colors: {
      'nord': {
        0: '#2E3440',
        1: '#3B4252',
        2: '#434C5E',
        3: '#4C566A',
        4: '#D8DEE9',
        5: '#E5E9F0',
        6: '#ECEFF4',
        7: '#8FBCBB',
        8: '#88C0D0',
        9: '#81A1C1',
        10: '#5E81AC',
        11: '#BF616A',
        12: '#D08770',
        13: '#EBCB8B',
        14: '#A3BE8C',
        15: '#B48EAD',
      },
    },
  },
},

Nord’s numbering system remains, but the syntax for our classes change slightly. With this nested grouping our background color example now looks like this:

<body class="bg-nord-0">
  <!-- your body content -->
</body>

This syntax is closer to the default Tailwind color syntax (bg-gray-900 for example), compared to method 1. The big difference being the numbering system. Here we’re going to keep using the Nord numbering system (0-15 instead of 50-900)

And now we get to use the default Tailwind palette when we need it - for black, white, transparent, and other colors. It’s a good compromise. Here is our Tailwind Play example using this method.

If you don’t mind class name syntax inconsistency between the default palette and the Nord palette you are free to extend Tailwind’s palette without using
color object syntax like the first example, to keep the Nord theme names. We’ve implemented that here.

There are a couple of decisions to make before chosing which method to implement:

Do you want or need the default Tailwind palette?
What classname scheme do you want to use? nord0 or nord-0?

Both methods are equally as simple. So extending the default palette is our recommendation. There are few (if any) downsides to keeping the default palette since all classes are generated on-demand using Tailwind’s JIT engine.

The naming scheme you choose is entirely down to your own preference.

Finally

This site (glacierblocks.com) uses a colorscheme based on Nord - it has been extended to include a few extra shades, and it uses a numberscheme that fits closer to Tailwind’s palette.

If you want to use the Nord theme in Tailwind, but want less compromise, you can explore it here. It’s free to use - just like Nord - we’ve dubbed it glacier.