Unable to extend CSS Variables to Tailwind CSS with plugin

[mridboy96]

I have been working on setting up TailwindCSS along with PrimeVue for a Vue.js project built with Vite.

I have more or less got everything to work. My Tailwind Utility classes are working properly. The only thing I am not able to get to work is the CSS Variables associated to the colors that I have defined in a custom theme preset. I am currently using PrimeVue in styled mode.

Ideally I would like the tailwindcss-primeui plugin to extend all the CSS variables defined to it's tailwindcss counterparts but this is not happening.

I am hereby attaching below all the associated code snippets. Please have a look at it and any help with regard to this would be very useful.

PrimeVue - v4.2.5
TailwindCSS - v4.0
tailwindcss-primeui - v0.4.0

Main.css

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

@import './BaseVariables.css';
@import './Colors.css';
@import './Typography.css';

@import 'tailwindcss';

body {
  color: var(--color-text);
  background: var(--p-secondarybackground-50);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family: 'Noto Sans', serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

BaseVariables.css

/* Base CSS Variables */
:root {
    /* Semantic Colors */
  --p-primary-50: #e2f6ff;
}

/* semantic color variables for this project */
:root {
  --p-primary-color: var(--p-primary-500);
}

tailwind.config.js

import TailwindPrimeVueUI from 'tailwindcss-primeui/';
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [TailwindPrimeVueUI],
};

*ThemePreset.js

import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';

export const primeVueDesignPreset = definePreset(Aura, {
  /// Primitive Tokens
  primitive: {
    borderRadius: {
      none: '0',
      xs: '4px',
      sm: '6px',
      md: '8px',
      lg: '12px',
      xl: '14px',
    },
    /// Background Color Tokens
    whiteBackground: {
      50: '#FFFFFF', /// Primary Swatch
      100: '#FFFFFF',
      200: '#FFFFFF',
      300: '#FFFFFF',
      400: '#FFFFFF',
      500: '#FFFFFF',
      600: '#FFFFFF',
      700: '#FFFFFF',
      800: '#FFFFFF',
      900: '#FFFFFF',
    },
    offWhiteBackground: {
      50: '#F1F4F5', /// Primary Swatch
      100: '#DBE4E6',
      200: '#C3D3D7',
      300: '#A9C0C6',
      400: '#94B0B7',
      500: '#7FA1A9',
      600: '#729097',
      700: '#627A80',
      800: '#53666B',
      900: '#414f53',
    },

    /// Main Colors Tokens
    blueSapphire: {
      50: '#e2f6ff',
      100: '#b7eafd',
      200: '#89dcfa',
      300: '#5ecef4',
      400: '#44c4ee',
      500: '#3bbae7',
      600: '#34aad3',
      700: '#2996b7',
      800: '#1f829e',
      900: '#0c6071', /// Main Swatch (primary & secondary)
    },
    indiaGreen: {
      50: '#eff9ea',
      100: '#d7f1ca',
      200: '#bce7a7', /// Main Swatch (primary)
      300: '#a1dd83',
      400: '#8ad567',
      500: '#75cd4c',
      600: '#66bc43',
      700: '#51a839', /// Main Swatch (secondary)
      800: '#3d9430',
      900: '#0c711d',
    },
    patternsBlue: {
      50: '#E3F2F5', // Primary Swatch
      100: '#B6E0E6',
      200: '#83CDD7',
      300: '#4BBAC5',
      400: '#14ABB6',
      500: '#009CA5',
      600: '#008E96',
      700: '#007E84',
      800: '#006E72',
      900: '#005253',
    },
    eerieBlack: {
      50: '#f8f8f8',
      100: '#f1f1f1',
      200: '#e7e7e7',
      300: '#d7d7d7',
      400: '#b3b3b3',
      500: '#939393',
      600: '#6b6b6b',
      700: '#575757',
      800: '#393939',
      900: '#191919', // Primary Swatch
    },
  },
  /// Semantic Tokens
  semantic: {
    transitionDuration: '0.2s',
    disabledOpacity: '0.6',
    focusRing: {
      width: '2px',
      style: 'solid',
      color: '{primary.900}',
      offset: '2px',
    },
    /// Setting primary, secondary and tertiary tokens from - Main Colors Tokens
    primary: {
      50: '{blueSapphire.50}',
      100: '{blueSapphire.100}',
      200: '{blueSapphire.200}',
      300: '{blueSapphire.300}',
      400: '{blueSapphire.400}',
      500: '{blueSapphire.500}',
      600: '{blueSapphire.600}',
      700: '{blueSapphire.700}',
      800: '{blueSapphire.800}',
      900: '{blueSapphire.900}',
    },
    secondary: {
      50: '{indiaGreen.50}',
      100: '{indiaGreen.100}',
      200: '{indiaGreen.200}',
      300: '{indiaGreen.300}',
      400: '{indiaGreen.400}',
      500: '{indiaGreen.500}',
      600: '{indiaGreen.600}',
      700: '{indiaGreen.700}',
      800: '{indiaGreen.800}',
      900: '{indiaGreen.900}',
    },
    tertiary: {
      50: '{patternsBlue.50}',
      100: '{patternsBlue.100}',
      200: '{patternsBlue.200}',
      300: '{patternsBlue.300}',
      400: '{patternsBlue.400}',
      500: '{patternsBlue.500}',
      600: '{patternsBlue.600}',
      700: '{patternsBlue.700}',
      800: '{patternsBlue.800}',
      900: '{patternsBlue.900}',
    },
    text: {
      50: '{eerieBlack.50}',
      100: '{eerieBlack.100}',
      200: '{eerieBlack.200}',
      300: '{eerieBlack.300}',
      400: '{eerieBlack.400}',
      500: '{eerieBlack.500}',
      600: '{eerieBlack.600}',
      700: '{eerieBlack.700}',
      800: '{eerieBlack.800}',
      900: '{eerieBlack.900}',
    },

    /// Setting background tokens from - Main colors tokens
    primarybackground: {
      50: '{whiteBackground.50}',
      100: '{whiteBackground.100}',
      200: '{whiteBackground.200}',
      300: '{whiteBackground.300}',
      400: '{whiteBackground.400}',
      500: '{whiteBackground.500}',
      600: '{whiteBackground.600}',
      700: '{whiteBackground.700}',
      800: '{whiteBackground.800}',
      900: '{whiteBackground.900}',
    },
    secondarybackground: {
      50: '{offWhiteBackground.50}',
      100: '{offWhiteBackground.100}',
      200: '{offWhiteBackground.200}',
      300: '{offWhiteBackground.300}',
      400: '{offWhiteBackground.400}',
      500: '{offWhiteBackground.500}',
      600: '{offWhiteBackground.600}',
      700: '{offWhiteBackground.700}',
      800: '{offWhiteBackground.800}',
      900: '{offWhiteBackground.900}',
    },
    colorScheme: {
      /// Light Mode
      light: {
        /// Colors used for - Text and other surfaces.
        surface: {
          0: '#FFFFFF',
          50: '{text.50}',
          100: '{text.100}',
          200: '{text.200}',
          300: '{text.300}',
          400: '{text.400}',
          500: '{text.500}',
          600: '{text.600}',
          700: '{text.700}',
          800: '{text.800}',
          900: '{text.900}',
        },

        /// Colors used for - Buttons, Links, and other components in light mode.
        primary: {
          color: '{primary.900}',
          contrastColor: '{surface.0}',
          hoverColor: '{primary.800}',
          activeColor: '{primary.900}',
        },
      },
    },
  },
});

main.js

app.use(PrimeVue, {
  // Default theme configuration
  theme: { preset: primeVueDesignPreset, options: { ripple: true, prefix: 'p', darkModeSelector: false } },
});

[space88man]

TL;DR: https://tailwindcss.com/docs/functions-and-directives#plugin-directive:

Use the @plugin directive to load a legacy JavaScript-based plugin:

and primevue-with-tailwind-40

---

It might be a Tailwind CSS v4.0 thing - not using tailwind.config.js anymore: try

/* inside Main.css
 * tailwind v4.0 CSS-first configuration
 * /
...stuff...

@import './BaseVariables.css';
@import './Colors.css';
@import './Typography.css';

@import 'tailwindcss';
@plugin 'tailwindcss-primeui';

...other stuff...

[mridboy96]

Thanks a lot for this!!

I did figure out that it was indeed the usage of the @plugin directive. The link you have sent is also very helpful will go ahead and apply all the required changes.

My setup is currently working with the @plugin directive changes.