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

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/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')],
        });

backend.css and profile.css files have unique classes, but they all have some common classes in app.css. I want to define some common classes in app.css and possibility say in backend.css to overwrite :

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

which was priorly defined in common

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?

Thanks!

pascual

5 years ago

Level 6

I am in no way an expert at these types of customizations with Tailwind, but it seems to me that the problem here might be that you try to define app_main_color after Tailwind has done its thing.

As the error message states:

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.

I had a look at one of my own app.css using Tailwind and some imports, and there we have the imports before the Tailwind classes.

Example:

@import url('https://fonts.googleapis.com/css?family=Nunito:200,400');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
@import url('https://fonts.googleapis.com/css?family=Francois+One&subset=latin-ext');

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

mstdmstd

5 years ago

Level 8

I tried to set app.css at top of resources/css/backend.css :

/* I TRIED TO UNCOMMENT BOTH LINES BELOW */
@import '/resources/css/app.css';
/*@import app.css;*/

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


@layer base {

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


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



    .admin_page_container_wrapper {
        @apply flex-1 p-0 m-0 app_main_color;
    }

Biut any way I got SyntaxError :

(26: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.

  24 | 
  25 |     .admin_page_container_wrapper {
> 26 |         @apply flex-1 p-0 m-0 app_main_color;
     |                               ^
  27 |     }
  28 |

...

esorone

5 years ago

Level 4

Hey,

Why not extent the colors of tailwind via the config? In the way you don’t have to do difficult stuff. Just add the colors to the config give them a proper name and generate.

https://tailwindcss.com/docs/customizing-colors

mstdmstd

5 years ago

Level 8

Different colors that is only one option. Diffence can be not only in color. 2) I do not see how different colkors must be defined for different css files. Please give example

mstdmstd

5 years ago

Level 8

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 ?

Please or to participate in this conversation.