Roots Discourse

Sage 10 + tailwinds 3 - 10.0.0-beta.1 & 2 - `@layer utilities {}` not working?

Hey all,

I’ve been using @responsive in Tailwind 2. to create responsive css classes. I’m not even sure how it worked, since I think it was a TW 1 function that had been removed in TW2. How ever, it worked.

Anyway, I’ve upgraded TW2 to TW3 and the functionality broke. I’ve switched since I wanted to play with the columns-2xs classes. From the upgrade guide I read I should change to @layer utilities since this not only covers the screen sizes, but also the pseudo elements. #nice

But I get the feeling this doesn’t get rendered. Here a test I’ve used in the app.scss.

@layer utilities {
  .my-back {
    background-color: green;
  }
}

I’ve been using Sage 10.0.0-beta.1 but also tested it with 10.0.0-beta.2. Is this a Sage thing, or am I using the code wrong? :slight_smile: :smile:

Are you using my-back anywhere in your views?

I’m able to use @layer utilities {} without an issue

Hey Ben,

yes, I’ve placed int app.blade.php view as a test:

  <main id="main" class="main my-back">
    @yield('content')
  </main>

Some details about my environment:

  • Trying a clean Sage 10 Beta 2 install
  • MacOS 11.4
  • Node v16.13.1 , installed with NVM
  • WP is locally hosted with Mamp
  • localhost/my-site (havn’t changed bud settings)
  • no luck on yarn dev and yarn build
  • I use PhpStorm as my IDE

I’m not too familiar with this all. Are there other environment elements that influence the working of sage with tailwind? What other versions should I check. Or are there settings I have to change in Sage 10 to get this working? (I presume it should work out of the box)) Is there another way to check if the post processor works? I found out none of the tailwind functionalities work. It renders column-span-6 but not lg:column-span-6. So, it’s not just my custom css.

I’ve removed node from homebrew and the node independent installer (not installed simultaneously) and changed to node installed by NVM. After this I’ve deployed a clean Sage 10 beta 2 theme and this time around I AM able to use @layer. Which concludes it now has something to do with my Beta 1 theme in combination with TW 3.

Guess I should upgrade my current theme project to beta 2 to be able to work with TW 3.

One note. Running composer install and composer update return an error:

Generating optimized autoload files
> Roots\Acorn\ComposerScripts::postAutoloadDump
Script Roots\Acorn\ComposerScripts::postAutoloadDump handling the post-autoload-dump event terminated with an exception
                                                             
  [ErrorException]                                           
  proc_open() expects parameter 1 to be string, array given  
                                                             

Can I ignore this error? Because the theme seems to be build.

1 Like

Glad you got it working :tada:

Do you happen to be running PHP 7.3? If so, can you switch to 7.4 or 8.x?

Hey good catch! I was not running PHP 7.3.* on Mamp 6.1 But PHP 7.4.* (I believe it was 7.4.9, but I forgot to check the exact version before I upgraded). I’ve updated Mamp to 6.6, which has PHP 7.4.21 and 8.0.8. Both of these versions did not trow an error.

maybe the style.cssRequires PHP: 7.3 should change to 7.4.21
I don’t know if this is also declared in package.json or composer.json

Many thanks for your help Ben

1 Like

Hello,

I have also the following error when deploying on the production server:

> Roots\Acorn\ComposerScripts::postAutoloadDump
Script Roots\Acorn\ComposerScripts::postAutoloadDump handling the post-autoload-dump event terminated with an exception


  [ErrorException]
  Array to string conversion

And the PHP version is 7.4.25. Has someone an idea about this error?
Best Regards,

Let’s get a new topic opened for this separate issue since this topic is already solved