If you already know how to set up the new Tailwind for your React project, you can skip to the defining theme section.

Tailwind released a new version (V4.0) in January with a bunch of new features, one of which is a radically simplified setup experience. Setting up Tailwind in a React project with Vite can be done with the Tailwind PostCSS using the code below:

npm install tailwindcss @tailwindcss/postcss postcss

The above command creates a postcss.config.mjs configuration and a tailwind.config.js file in the root folder of your project. You’ll also have to add the CSS import statements:

@tailwind base;

@tailwind components;

@tailwind utilities;

into your global CSS file to ensure that Tailwind’s styles are correctly injected in your project. But with the new Tailwind + Vite plugin, installation and commands are different.

The New Installation Process

To install Tailwind with the Vite plugin, you run the code below in your terminal:

npm install tailwindcss @tailwindcss/vite

and after that is done, you have to configure the Vite plugin by adding the tailwind plugin to your vite configuration file as shown below

Image from tailwind documentation

The next thing for you to do is to import Tailwind to your CSS file with the command

@import "tailwindcss";

Instead of the base, component, and utilities commands being used in previous versions.

You are all set; you can run your project locally with

npm run dev

or anything specified in your package.json scripts.

You have successfully added TailwindCSS with the vite plugin and you can add its style within your code as you normally would

Defining Themes

Defining themes previously is done by declaring a theme object with an extend property where you can define custom values for colors, fonts, and screens, to mention a few, as shown below without overriding Tailwind’s default theme.

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        black: "#0D0D0D",
        lightgray: "#D6D6D6",
        darkgray: "#474747",
        gray: "#343434",
      },
      fontFamily: {
        mona: ["Mona Sans", "sans-serif"],
        inter: ["Inter", "sans-serif"],
      },
      screens: {
        'smScreen': { min: "500px", max: "639px" },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};

The above is done inside a tailwind.config.js file, but that has changed in v4.0; themes are now defined in your CSS file.
Yes, that same file that you imported tailwindcss, is also where you’ll define your themes with a different syntax.

Adding Custom Fonts

• Import fonts

To define a custom font, you can do that by downloading a font folder and importing it inside the CSS file using @fontface like this:

@font-face {
  font-family: Roboto;
  src: url('fonts/Roboto/Roboto-Regular.ttf');
}

@import "tailwindcss";

Or by using embedded code like this:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import "tailwindcss"

Note: Importing fonts should be done at the top of the CSS file before the Tailwind import statement.

• Using the font in your theme

Defining the font is done with CSS variable syntax, also known as CSS custom properties, as used in Vanilla CSS when defining global styles inside the :root selector. Only that this time around, you are defining it inside a theme object using @theme

@font-face {
  font-family: Roboto;
  src: url('fonts/Roboto/Roboto-Regular.ttf');
}

@import "tailwindcss";

@theme {

  --font-roboto: Roboto, "sans-serif";

}

@themethrows an unknownAtRules error, which is ignorable; it won’t affect the performance of your style.

Adding Custom Colors

This is straightforward; it’s also done using the CSS variable syntax for color. Let’s say you want to define a custom purple color, #d173d6. You can do so by adding a purple color variable inside the theme as shown in the code below.

@import "tailwindcss";

@theme {
  --font-roboto: Roboto. "sans-serif":

  --color-purple: #d173d6;

}

Note that the color code is not in quotes. I kept making that mistake because in the previous version, color codes were written inside double quotes, and when I did the same in the new version, the color didn’t work.

This is because in CSS custom properties (variables), the way values are interpreted depends on their data type. Color values such as #d173d6, rgb(209, 115, 214), and hsl(300, 50%, 60%) are not strings; they are recognized as raw CSS values that the browser parses directly.

So, putting it in quotes treats the color code as strings, and it won’t be treated as a valid color property.

You can now make use of the color property in your HTML and that should work fine as shown below

The new Tailwind version doesn’t only allow you to define fonts and colors; you can also define varieties of properties like screen breakpoints, card colors, border radius, primary, secondary, tertiary colors, background image, spacing, transitions, and all other properties not mentioned here.

If there are other ways you know to define themes in the new version, let me know in the comments below.

Thanks for reading 🫡