CODEWITHSUNDEEP
ruby-on-railstailwind-css
Sonfaya
Sonfaya

Reputation: 65

Tailwind default text-[color] class not working (rails7)

i've just created a new rails project, setting tailwind as default with the command:

rails new project_name -T -d postgresql --css tailwind

When trying to use tailwind classes, it work except for the class including a color, like text-red. However text-white is working.

I tried to create my own class using @apply:

.red { @apply text-red; }

when launching bin/rails tailwindcss:watch, i get the following error: " The text-red class does not exist. If text-red is a custom class, make sure it is defined within a @layer directive. "

Any idea on why i cannot use this "text-red" class ?

he is my tailwind.config.js (it's the one generated by rails new):

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

Upvotes: 1

Views: 1102

Answers (1)

Wongjn
Wongjn

Reputation: 24408

Indeed as the error suggests, the text-red class would not exist with your current Tailwind configuration. By default in Tailwind, the colors that are not white, black or the keywords come in shades as listed in their documentation.

Either use a valid color, like text-red-500:

.red { @apply text-red-500; }

Or extend the red color shades with the special DEFAULT key in the Tailwind configuration:

module.exports = {
  // …
  theme: {
    extend: {
      // …
      colors: {
        red: {
          DEFAULT: 'red',
        },
      },
    },
  },
};

Or override the red color palette with a non-object value in the Tailwind configuration:

module.exports = {
  // …
  theme: {
    extend: {
      // …
      colors: {
        red: 'red',
      },
    },
  },
};

Upvotes: 1

Related Questions