CODEWITHSUNDEEP
laravelwebpacktailwind-css
mstdmstd
mstdmstd

Reputation: 3129

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/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.

Upvotes: 1

Views: 1902

Answers (1)

MHIdea
MHIdea

Reputation: 824

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.

Upvotes: 4

Related Questions