Default Theming With Tailwind

Introduction

Tailwind is a fantastic way to handle CSS styling. It allows developers to dynamically apply styles to their components without having to mess with external CSS files.

However, there are some styles that would be better if they had a global scope, therefore this guide contains examples on how to configure default styles on your Tailwind project.

Preflight

Before we talk about making our own default styles, let’s talk about the Tailwind styles that come out of the box

Tailwind Preflight is a premade set of base styles that was implemented with the motivation of smoothing out cross-browser inconsistencies. When you install Tailwind into a project, preflight is automatically configured out of the box.

Disabling Preflight

While it is recommended to keep Preflight enabled, especially if Tailwind is your sole CSS solution, there are times where it would be necessary to disable the base styles.

To disable preflight, add the following to the module.exports found in your tailwind.config.js file:

corePlugins: {
    preflight: false,
}

So, for example, your tailwind.config.js file will looking something like this:

module.exports = {
	...,
  corePlugins: {
    preflight: false,
  }
}

Colors

By default, Tailwind comes with a multitude of colors for developers to use, where you can find here. However, there will be times where you will want to define your own colors for your app.

To do this, add a theme object to your tailwind.config.js, and within that object, define a colors object. For example, if you wanted to define tahiti as specifically the color 3ab7bf, you can achieve this like so:

module.exports = {
    theme: {
        colors: {
            tahiti: "#3ab7bf",
        },
    },
};

If you wanted to add shade variants of your colors, similar to the default Tailwind colors, you can achieve it like so:

module.exports = {
    theme: {
        colors: {
            tahiti: {
                100: "#cffafe",
                200: "#a5f3fc",
                300: "#67e8f9",
                400: "#22d3ee",
                500: "#06b6d4",
                600: "#0891b2",
                700: "#0e7490",
                800: "#155e75",
                900: "#164e63",
            },
        },
    },
};

Extending The Theme

If you added the colors in the way we did above, you will notice that Tailwind will no longer have access to its usual base colors. If you would like to keep the original color palate, while adding or replacing certain colors, you can do so by wrapping colors inside an extend object, which will tell Tailwind to “extend” its theme instead of redefining it.

Example: Custom Colors

In this example, we have added two new colors to the tailwind.config.js, the tahiti palate we defined above, as well as a new single color gray-dark.

As you can see in src/App.tsx, we define a background color for the app using the new gray-dark color, and create three containers, each showcasing different shades of the tahiti swatch.

Fonts

Another thing that developers will most likely want to customize are the fonts used by their application. To customize your font in Tailwind, add a fontFamily object to your theme object:

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                display: "Oswald, ui-serif", // Adds a new `font-display` class
                sans: ["Graphik", "sans-serif"],
                serif: ["Merriweather", "serif"],
            },
        },
    },
};

The above defines 3 new fonts, display , sans, and serif.

External Fonts

We would also need to import whatever external font that you would like to use as well. Let’s say we wanted to use the CodeLab logo’s font, “Poppins”.

Find the global CSS file in your App, and add the proper @import statement:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

Similarly to above, add the font to your tailwind.config.js:

fontFamily: {
    poppins: "Poppins", sans - serif;
}

Then, we can use this font wherever we want in the app:

<span className="font-poppins text-7xl text-white">CodeLab</span>

Here it is in action:

Additional Resources

To learn more about setting default styles in Tailwind, please check out the official Tailwind Documentation on theme configuration.

To learn more about Preflight and what the default styles are, please check out the official Tailwind Documentation on Preflight.