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

Where it works in light mode:
https://www.accessibilityfirst.at/posts/accessibility-testing-part-one

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

My tailwind.config.ts file

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>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;
</code>
<code>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; </code>
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>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;
</code>
<code>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; </code>
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>type CategoryColors = {
[key: string]: string;
};
export default CategoryColors;
</code>
<code>type CategoryColors = { [key: string]: string; }; export default CategoryColors; </code>
type CategoryColors = {
  [key: string]: string;
};

export default CategoryColors;

Path object:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>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;
</code>
<code>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; </code>
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>type CategoryPaths = {
[key: string]: string;
};
export default CategoryPaths;
</code>
<code>type CategoryPaths = { [key: string]: string; }; export default CategoryPaths; </code>
type CategoryPaths = {
  [key: string]: string;
};

export default CategoryPaths;

Header component for every blog post:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>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;
</code>
<code>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; </code>
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
</code>
<code>module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; </code>
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Folder Structure

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.

4

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}'

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>// 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}'
],
...
}
</code>
<code>// 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}' ], ... } </code>
// 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.

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị
Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật