TailwindCSS and next.js - can't apply custom colors

Question

I am having a particular issue only on one project, which is using nextjs and tailwindcss.

I try to extend the color scheme with some custom colors and intellisennse recognizes the colors, but they are not applied and when I use it with @apply, app just breaks, saying those classes do not exist.

Syntax error: @apply cannot be used with .text-test because .text-test either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-test exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

This works in production so colors are applied, error just happens in dev. I can work around it, but still it boggles me why it is not working.

_app.js


import ClientProvider from '../context/urqlClient'
import makeClient from '../utils/makeUrqlClient'

import '../styles/index.css'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClientProvider makeClient={makeClient}>
      <Component {...pageProps} />
    </ClientProvider>
  )
}

export default MyApp

tailwind.config.js


module.exports = {
  theme: {
    colors: {
      transparent: colors.transparent,
      current: colors.current,
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      orange: colors.orange,
      red: colors.red,
    },
    extend: {
      colors: {
        barbarian: '#FF7D01',
        bard: '#E6CC80',
        cleric: '#FFFFFF',
        druid: '#FF7D0A',
        fighter: '#C79C6E',
        monk: '#00FF96',
        paladin: '#F58CBA',
        ranger: '#ABD473',
        rogue: '#FFF569',
        sorcerer: '#FF4700',
        warlock: '#9482C9',
        wizard: '#69CCF0',
      },
    },
  },
  variants: {},
  plugins: [],
  corePlugins: {
    float: false,
  },
  purge: ['./**/*.tsx', './**/*.css'],
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
}

index.css (tailwind stuff only, rest I won't bother you with)

@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind screens;
@tailwind utilities;

html {
  font-family: 'Inter var', sans-serif;
  width: 100vw;
  overflow-x: hidden;
}
...

Can you share the CSS code where you import the tailwind directives as well as the tailwind.config.js, and also _app.js from Next.js? — Stan Loona
For me, I had the same issue when used theme.extend.colors. Try theme.colors — caffeinum
Sorry, looks like it should be theme.extend.colors after all... — caffeinum

Olavi Olavi · Accepted Answer · 2020-09-25T22:21:33

I think you will need to move your CSS before the @tailwind lines. I think some of your styles must be missing from this component, since I don't see .text-test being referenced anywhere.

Anyways, try this:

html {
  font-family: 'Inter var', sans-serif;
  width: 100vw;
  overflow-x: hidden;
}
...

@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind screens;
@tailwind utilities;

TailwindCSS and next.js - can't apply custom colors

1 Answers