How In Laravel 8 with Tailwind CSS define backend.css which overwrite app.css?

Question

In a Laravel 8 / Tailwind CSS v2.1 application, I make different layouts. So in `webpack.mix.js, I have custom class files defined.

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/backend.css', 'public/css', [
        require("tailwindcss"),
    ])
    .postCss('resources/css/profile.css', 'public/css', [
        require("tailwindcss"),
    ])
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    });

Any of the *.css files have unique classes, but they all have some common classes. I want to define some common app.css with some common definitions, and say in backend.css to define:

.admin_main_color {
    @apply text-gray-300 bg-green-900;
}

MODIFIED : as that is laravel project I have no HTML files, but blade.php file. So I try in next steps : In webpack.mix.js I added app.css :

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ])
    .postCss('resources/css/backend.css', 'public/css', [
        require("tailwindcss"),
    ])
    .postCss('resources/css/profile.css', 'public/css', [
        require("tailwindcss"),
    ])
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    });

In resources/views/layouts/backend.blade.php I added app.css (which is before of backend.css) :

<title id="app_title">{{ config('app.name', 'Laravel') }}</title>

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/backend.css') }}" rel="stylesheet">

In resources/css/app.css I have :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    .app_main_color { // in some cases I need to possibility to overwrite class in frontend.css/backend.css
        @apply text-yellow-300 bg-red-900;
    }

But when I try in resources/css/backend.css :

@tailwind base;
@tailwind components;
@tailwind utilities;
@import app.css;


@layer base {

    .test_class {
        @apply text-gray-300 bg-red-800;
    }

    /*.app_main_color {*/
    /*    @apply text-gray-300 bg-green-900;*/
    /*}*/

If to leave commented 3 lines above, I got error in the console :

 (23:31) /mnt/_work_sdb8/wwwroot/lar/tAdsBack/resources/css/backend.css The `app_main_color` class does not exist. If you're sure that `app_main_color` 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.

Lines with :

@import app.css;

did not help. How can I do it? I hope I clearly explained what I want...

And that will overwrite the admin_main_color definition in app.css. Can I do this, and how?

MODIFIED 2: In laravel5-7 with bootstrap I had file resources/sass/_variables.scss with defined variables and in file resources/sass/app.scss I had lines :

@import "node_modules/font-awesome/scss/font-awesome";
@import 'variables';

Can I use similar way in my app? If yes, how ?

MODIFIED 3 :

@import app_main_color;
/*@import app_main_color from app.css;*/

@layer base {

    h3 {
        @apply text-xl font-bold;
        padding:4px;
    }
    h4 {
        @apply text-lg font-bold;
        padding:3px;
    }

    /*.app_main_color {*/
    /*    @apply text-gray-300 bg-green-900;*/
    /*}*/



    .admin_page_container_wrapper {
        @apply flex-1 justify-items-start justify-self-start app_main_color  p-1 m-0;
    }

but I got error :

(35:62) /mnt/_work_sdb8/wwwroot/lar/tAdsBack/resources/css/backend.css The `app_main_color` class does not exist. If you're sure that `app_main_color` 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.

  33 | 
  34 |     .admin_page_container_wrapper {
> 35 |         @apply flex-1 justify-items-start justify-self-start app_main_color  p-1 m-0;
     |                                                              ^
  36 |     }

The sense of importing app_main_color is that it is used in other classes, like in definition of admin_page_container_wrapper class, but I can not find how to makle it.

You should be able to do this, the primary point is to include them in your HTML as this: base definition, then custom definitions, that way you will overwrite them. — matiaslauriti
– matiaslauriti, Commented May 4, 2021 at 15:13

MHIdea · Accepted Answer · 2021-05-17 05:38:01Z

4

+50

If I need to compile two different CSS files using tailwindcss and also define new variables or classes, I would create app.css and backend.css and also main.css.

main.css:

.app_main_color{
    @apply text-xl font-medium text-yellow-300 bg-red-900;
}

app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base { 
    .new_class{
        @apply app_main_color text-green-400 ;
    }
}

backend.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
.app_main_color{
    @apply text-xl font-medium text-yellow-300 bg-green-900;
  }
}
@layer base { 
    .new_class{
    @apply app_main_color text-blue-400;
    }
}

Now to let app and backend use classes defined in main you need to add main as component to tailwind.config.js. You can do it by using css-in-js-syntax or load the main.css file as follows:

const defaultTheme = require('tailwindcss/defaultTheme');
const plugin = require('tailwindcss/plugin')
const fs = require("fs")
const postcss = require('postcss')
const postcssJs = require('postcss-js')
const css = fs.readFileSync("./resources/css/main.css", "utf8")
const parsedCss = postcss.parse(css)

const root = postcssJs.objectify(parsedCss)
module.exports = {
    purge: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
        plugin(function ({ addComponents }) {
            addComponents(root)

        })
    ],
};

In app or backend files you can define new or change classes as backend is changing the app_main_color class but app is just using it.

Also you don't need to include app and backend in html file at the same time. Load each per route.

edited May 17, 2021 at 5:38

answered May 14, 2021 at 14:07

MHIdea

8245 silver badges8 bronze badges

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

5 Comments

mstdmstd Over a year ago

In backend.css file class app_main_color is used in definitions of other classes of this file. I would like if app_main_color is not defined in backend.css got its value from app.css. Sorry, if did not put clearly what I want... Maybe that is not possible?

mstdmstd Over a year ago

Yes, but how to import app_main_color? Please look at MODIFIED 3

mstdmstd Over a year ago

I modified file tailwind.config.js except commented lines : // require('@tailwindcss/forms'), // require('postcss-import'), as I do not use them in my app But anyway I got error : s The app_main_color class does not exist If I comment defintion of app_main_color - that is what I need . Didi I missed something? Couul you please explain difference "@layer components { " and "@layer base { " ? Is line : @layer components { .app_main_color { required in this place ?

mstdmstd Over a year ago

@All, I want to create chat with MHIdea. How can I do it here in this branch ?

clockw0rk Over a year ago

that hack, making it a plugin and the custom loading stuff at the top, solved all my problems. kudos

Collectives™ on Stack Overflow

How In Laravel 8 with Tailwind CSS define backend.css which overwrite app.css?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related