Error: Cannot apply unknown utility class: bg-lol-dark

[charlesdpjohnston]

Hello, whenever I keep having this issue with every utility class I try to use, even default ones. This is my current application.css:

@import "tailwindcss"; body { @apply bg-lol-dark; } .gradient-container { @apply bg-gradient-to-b from-lol-dark to-gray-800; }

and this is the full error:

$ ruby bin/rails tailwindcss:build
Error: Cannot apply unknown utility class: bg-lol-dark
bin/rails aborted!
Command failed with exit 1: C:/Users/charl/.gem/ruby/3.3.0/gems/tailwindcss-ruby-4.0.8-x64-mingw-ucrt/exe/x64-mingw-ucrt/tailwindcss

This is with a clean stall of tailwind using the instructions on the official docs for ruby on rails: https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails

this is my tailwind.confg.js:

module.exports = { content: [ './app/views/**/*.{erb,haml,html,slim}', './app/helpers/**/*.rb', './app/assets/tailwind/**/*.css', // Matches application.css './app/javascript/**/*.js' ], theme: { extend: { animation: { 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite' }, colors: { 'lol-dark': '#0f1321', 'lol-accent': '#cda869' } } }, plugins: [require('@tailwindcss/forms')] }

Does anyone know how to fix this?

I also got the same error when using this as my application.css:

@import 'tailwindcss/theme' theme(reference);
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.test-bg {
@apply bg-blue-500;
}

I don't know why this wouldn't work since bg-blue-500 should be a default utility.

[wongjn]

lol-dark doesn't exist as a value since Tailwind doesn't read your tailwind.config.js file by default.

You could consider defining the colors in CSS like:

 @import "tailwindcss"; body { @apply bg-lol-dark; } .gradient-container { @apply bg-gradient-to-b from-lol-dark to-gray-800; }
+
+@theme {
+  --color-lol-dark: #0f1321;
+  --color-lol-accent: #cda869;
+}

Otherwise, you can load your tailwind.config.js via the @config directive`:

 @import "tailwindcss"; body { @apply bg-lol-dark; } .gradient-container { @apply bg-gradient-to-b from-lol-dark to-gray-800; }
+
+@config "./relative/path/to/tailwind.config.js";

[charlesdpjohnston]

I can't get tailwind to see the config for some reason, even when i feed it the direct binary path.

$ /c/Users/charl/.gem/ruby/3.3.0/gems/tailwindcss-ruby-4.0.8-x64-mingw-ucrt/exe/tailwindcss -i app/assets/tailwind/application.css -o app/assets/builds/tailwind.css -c /c/Users/charl/Desktop/league_strategy/league_analyzer/tailwind.config.js --watch
["C:/Users/charl/.gem/ruby/3.3.0/gems/tailwindcss-ruby-4.0.8-x64-mingw-ucrt/exe/x64-mingw-ucrt/tailwindcss", "-i", "app/assets/tailwind/application.css", "-o", "app/assets/builds/tailwind.css", "-c", "C:/Users/charl/Desktop/league_strategy/league_analyzer/tailwind.config.js", "--watch"]
Error: Cannot apply unknown utility class: bg-lol-dark
C:/Users/charl/.gem/ruby/3.3.0/gems/tailwindcss-ruby-4.0.8-x64-mingw-ucrt/exe/tailwindcss:12:in system': Command failed with exit 1: C:/Users/charl/.gem/ruby/3.3.0/gems/tailwindcss-ruby-4.0.8-x64-mingw-ucrt/exe/x64-mingw-ucrt/tailwindcss (RuntimeError) from C:/Users/charl/.gem/ruby/3.3.0/gems/tailwindcss-ruby-4.0.8-x64-mingw-ucrt/exe/tailwindcss:12:in

'

[wongjn]

Please see my previous comment: #16753 (comment), you need to define the colors in the CSS file or use @config.

[charlesdpjohnston]

My tailwind.config.js:

module.exports = {
  content: [
    './test.css', 
    './app/views/**/*.{erb,haml,html,slim}',
    './app/helpers/**/*.rb',
    './app/assets/tailwind/**/*.css',
    './app/javascript/**/*.js'
  ],
  theme: {
    extend: {
      animation: { 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite' },
      colors: {
        'lol-dark': '#0f1321',
        'lol-accent': '#cda869'
      }
    }
  },
  plugins: [require('@tailwindcss/forms')]
};

test.css:

.test { @apply bg-lol-dark; }

Test in command line:

$ /c/Users/charl/Desktop/league_strategy/league_analyzer/node_modules/.bin/tailwindcss -i test.css -o test-output.css -c tailwind.config.js
Error: Cannot apply unknown utility class: bg-lol-dark