Search code examples
next.jstailwind-cssconfig

Tailwind Classes not applying on certain components in NextTS project

For my blog website, I have different colors in the breadcrumb depending on the topic. The colors also do change respectively for light/dark mode.

I set up the colors in the tailwind.config.ts file and use them throughout the app. But when it comes to the pages for a specific blog post, only a few colors (the blue and red (light mode)) are working even though they are added dynamically.

I could not find any differences in the page setup, in the extend color setup, or so. The colors do appear in the source code inspect mode, but do not apply (not even overwritten by another color). They do simply not exist, like tailwind has not translate them into css.

Where it works in both, light and dark mode: https://www.accessibilityfirst.at/posts/accessibility-the-what-why-&-how

Breadcrumb showing characteristic word in blue color.

Where it works in light mode: https://www.accessibilityfirst.at/posts/accessibility-testing-part-one Breadcrumb showing characteristic word in red color.

Where it does not work at all ("UX Research" should be purple), also News, Web Development or UX Design: https://www.accessibilityfirst.at/posts/define-project Breadcrumb showing characteristic word in black color but should be purple.

My tailwind.config.ts file

import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        blue: {
          200: '#E6EFFE',
          500: '#99A8EA',
          800: '#084FD4',
        },
        purple: {
          200: '#F0E5FB',
          500: '#BF96F0',
          800: '#790BE0',
        },
        green: {
          200: '#EBFAF8',
          500: '#86CCCB',
          800: '#1E6B65',
        },
        red: {
          200: '#FCE8F1',
          500: '#EE8EB5',
          800: '#D11B67',
        },
        yellow: {
          200: '#FFFBE6',
          500: '#FFF700',
          800: '#615200',
        },
        accent: {
          1: '#FAFAFA',
          2: '#EAEAEA',
          3: '#333',
        },
        success: '#0070F3',
        cyan: '#79FFE1',
      },
      spacing: {
        28: '7rem',
      },
      letterSpacing: {
        tighter: '-.04em',
      },
      fontSize: {
        '5xl': '2.5rem',
        '6xl': '2.75rem',
        '7xl': '4.5rem',
        '8xl': '6.25rem',
      },
      fontFamily: {
        body: ['var(--font-alliance)'],
      },
      boxShadow: {
        sm: '0 5px 10px rgba(0, 0, 0, 0.12)',
        md: '0 8px 30px rgba(0, 0, 0, 0.12)',
      },
      screens: {
        xs: '475px',
        ...defaultTheme.screens,
      },
      content: {
        bug: 'url("/assets/icons/bug.svg")',
        'bug-dark': 'url("/assets/icons/bug-dark.svg")',
        dark: 'url("/assets/icons/moon.svg")',
        'dark-mode': 'url("/assets/icons/moon-dark.svg")',
        light: 'url("/assets/icons/sun.svg")',
        'light-mode': 'url("/assets/icons/sun-dark.svg")',
        system: 'url("/assets/icons/system.svg")',
        exclamation: 'url("/assets/icons/exclamation.svg")',
      },
    },
  },
  darkMode: 'class',
  plugins: [],
};

export default config;

Here are the colors applied:

import type CategoryColors from '../interfaces/colors';

const categoryColors: CategoryColors = {
  News: 'text-yellow-800 dark:text-yellow-500',
  Accessibility: 'text-blue-800 dark:text-blue-500',
  'UX Research': 'text-purple-800 dark:text-purple-500',
  'UX Design': 'text-purple-800 dark:text-purple-500',
  'Web Development': 'text-green-800 dark:text-green-500',
  'QA Testing': 'text-red-800 dark:text-red-500',
  Documents: '',
};

export default categoryColors;

Here is the type of the colors:

type CategoryColors = {
  [key: string]: string;
};

export default CategoryColors;

Path object:

import type CategoryPaths from '../interfaces/paths';

const categoryPaths: CategoryPaths = {
  News: '/news',
  Accessibility: '/accessibility',
  'UX Research': '/ux-research',
  'UX Design': '/ux-design',
  'Web Development': '/web-development',
  'QA Testing': '/qa-testing',
  Documents: '/documents',
};

export default categoryPaths;

Type for the path object:

type CategoryPaths = {
  [key: string]: string;
};

export default CategoryPaths;

Header component for every blog post:

import Link from 'next/link';
import useTranslation from 'next-translate/useTranslation';
import categoryColors from '../lib/colors';
import categoryPaths from '../lib/paths';

type Props = {
  tags: string;
  category: string;
};

const Header = ({ tags, category }: Props) => {
  const { t } = useTranslation('header');
  const categoryColorsClass: string = categoryColors[category] || '';
  const categoryUrl: string = categoryPaths[category] || `/${category}`;

  return (
    <nav aria-label={t('label')} id="breadcrumb">
      <div className="text-2xl dark:text-slate-200 md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8 inline-block">
        <Link
          href="/"
          className="hover:underline focus:outline outline-inherit outline-offset-1"
        >
          {tags}
        </Link>
        .
      </div>
      <div
        className={`text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8 ml-2 inline-block ${categoryColorsClass}`}
      >
        <Link
          href={categoryUrl}
          className={`hover:underline focus:outline outline-inherit outline-offset-1 ${categoryColorsClass}`}
        >
          {category}
        </Link>
        .
      </div>
    </nav>
  );
};

export default Header;

The postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Folder Structure

Folder Structure of the project

What I have checked already:

  • Clear cache
  • reinstall node modules
  • delete .next folder and run again
  • typos, it does not make sense to me that the right color appears in two topics but not the other one, e.g. when creating the object, the word accessibility is one word, but QA testing, where it also works is within a string. All of these color names (blue, yellow, purple, red, green) are existing ones in Tailwind, why is only blue-500 and blue-800, red-800 overwritten but not the others?

If you need any more information, please let me know.

Solution

  • The categoryColors are defined inside the lib folder (colors.ts).

    lib is not in the content list of tailwind.config.ts, try adding './lib/**/*.{js,ts,jsx,tsx,mdx}'

    // tailwind.config.ts
const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './lib/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  ...
}

    explanation

    Tailwind will scan all the directories specified in the content field of the configuration file during the build process, identifying the utility classes used and including them in the final bundle.

    However, your categoryColors constant is not defined within the content scope in the Tailwind configuration file, so its contents will not be scanned.

    As for some styles in your categoryColors still being effective, I guess it's because you happened to use the same styles elsewhere, so they were detected by Tailwind. The remaining styles weren't so lucky. Since they never appeared within the content scope, they won't take effect.