SassBundle along with TailwindBundle

[lukepass]

Hello, I posted a related comment in another thread of the SassBundle:

https://github.com/SymfonyCasts/sass-bundle/issues/4

Since both bundles are involved, I will repost it here, thanks:

---

Hello, so as of today it's not possible to use SassBundle along with TailwindBundle correct? That's because they compete for the same file to build?

I also tried giving tailwind the SASS path:

symfonycasts_tailwind:
    input_css: '%kernel.project_dir%/assets/styles/app.scss'

But then I get this error:

Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

That's because the tailwind parser doesn't know how to process the SASS file. I also tried giving tailwind the SASS output file:

symfonycasts_tailwind:
    input_css: '%kernel.project_dir%/var/sass/app.output.css'

But it does nothing.

How can I do to use Tailwind along with SASS and AssetMapper? Is it a bad practice?

Thanks.

[squrious]

Hello,

I managed to make them work together with this trick:

<?php

namespace App\AssetMapper;

use Symfony\Component\AssetMapper\AssetMapperInterface;
use Symfony\Component\AssetMapper\Compiler\AssetCompilerInterface;
use Symfony\Component\AssetMapper\MappedAsset;
use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
use Symfony\Component\DependencyInjection\Attribute\Autowire;

#[AsDecorator('sass.css_asset_compiler')]
readonly class CssCompiler implements AssetCompilerInterface
{
    public function __construct(
        private AssetCompilerInterface $sassCompiler,
        #[Autowire('@tailwind.css_asset_compiler')]
        private AssetCompilerInterface $tailwindCompiler
    ) {
    }

    public function supports(MappedAsset $asset): bool
    {
        return $this->sassCompiler->supports($asset);
    }

    public function compile(string $content, MappedAsset $asset, AssetMapperInterface $assetMapper): string
    {
        $content = $this->sassCompiler->compile($content, $asset, $assetMapper);
        return $this->tailwindCompiler->compile($content, $asset, $assetMapper);
    }
}

And in config:

symfonycasts_tailwind:
  input_css: '%kernel.project_dir%/var/sass/app.output.css'

Entrypoint:

// assets/app.js

import './styles/app.scss';

Not sure it's the best way but it worked for me ^^

[lukepass]

That's quite clever but unfortunately it didn't work. The compiled SASS still includes @tailwind directives and they didn't get compiled.

I had to remove the @ from the service name because it was throwing an error.

Do you know why it's not working? I tried adding an exception / dump in the decorator but it didn't get called.

[lukepass]

I must correct myself. It "kinda" works but only when I run the command:

php bin/console asset-map:compile

And the first time it prints this error:

Built Tailwind CSS file does not exist: run "php bin/console tailwind:build" to   
  generate it

I had to manually run tailwind:build. In development it still doesn't work.

Thanks!

[squrious]

You have to run the sass build and then the tailwind build. In development both can be run with the --watch option in parallel so any change to app.scss will trigger rebuild from tailwind. I made a little demo here ;)

[lukepass]

Thanks, that worked; I can't understand the exact pipeline order but I can have SASS along with Tailwind. It would be nice to have this class already in the bundle!

[CaptainFemur]

Hi everyone ! I have the same issue. I have a repo with AssetMapper and SassBundle installed. I need to install the TailwindBundle, and I tried the @squrious's solution (from what I see, importants files are : the config in asset_mapper.yaml, the CssCompiler.php, and app.scss where you import tailwind rules).

Tailwind is loading correctly but my personal scss isn't recognize. I searched through the folder /var/tailwind and found that the css is build in the file app.output.built.css but Tailwind actually use another file : app.built.css (if I copy the content of the first one in the second one, it works).

How can I freely use TailwindBundle and SassBundle, am I missing something ?

#/assets/styles/app.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

@import './variables';

body {
    background-color: $primary;
}

#/config/packages/asset_mapper.yaml
symfonycasts_tailwind:
    input_css: "%kernel.project_dir%/var/sass/app.output.css"

#/assets/app.js
import './bootstrap.js';
import './styles/app.scss';
import Duck from './modules/duck.js';

const duck = new Duck('Waddles');
duck.quack();