The class does not exist error using tailwindcss in laravel 10 and vite

Question

I'm using Laravel 10 and TailwindCSS and Vite, I install TailwindCSS, PostCSS and Autoprefixer and everything is fine.

But when I create a custom class in Resourcess/css/app.css, I get the following error:

[plugin:vite:css] [postcss] /var/www/html/resources/css/app.css:32:5: The bg-primary class does not exist. If bg-primary is a custom class, make sure it is defined within a @layer directive.

`vite.config.js`

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Also, I am using plugin.js file to set custom config for TailwindCSS such as colors and more...

const plugin = require("tailwindcss/plugin");

module.exports = plugin(
  function ({ addBase, theme }) {
    addBase({
      [`.snap`]: {
        scrollSnapType: `x mandatory`,
        scrollBehavior: `smooth`,
      })),
   {
    theme:{
      extend: {
        colors: {
          dark: "#090E34",
          "dark-700": "#090e34b3",
          primary: "#15616d",
          secondary: "#13C296",
          "body-color": "#637381",
          warning: "#F9C107",
          danger: "#DC3545",
          success: "#3CA745",
          info: "#3BA2B8",
          light: "#efefef",
          "form-stroke": "#E0E0E0",
          "tg-bg": "#f7f8fa",
          black: "#212B36",
          stroke: "#E7E7E7",
          gray: "#F4F7FF",
          "gray-1": "#F4F7FF",
          "gray-2": "#F8FAFC",
          orange: "#F2994A",
          purple: "#9B51E0",
        },
      }
   }

And then I use this config file in tailwind.config.js as plugin.

This is tailwind.config.js file:

module.exports = {
  content: [
      './storage/framework/views/*.php',
      './resources/**/*.blade.php',
      './resources/**/*.js',
      './resources/**/*.vue',
      './resources/**/*.css'
  ],
  theme: {
    extend: {},
  },
  plugins: ['./plugin.js'],
}

hossein darvishi · Accepted Answer · 2023-02-24 16:57:22Z

1

i fixed it :) Just change this code like this

tailwind.config.js file =>

const pluginFile=require('./plugin');
module.exports = {
    darkMode:'class',
  content: [
      './storage/framework/views/*.php',
      './resources/**/*.blade.php',
      './resources/**/*.js',
      './resources/**/*.vue',
      './resources/**/*.css'
  ],
  theme: {
    extend: {},
  },
  plugins: [pluginFile],
}

answered Feb 24, 2023 at 16:57

hossein darvishi

412 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

The class does not exist error using tailwindcss in laravel 10 and vite

`vite.config.js`

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

vite.config.js

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`vite.config.js`