You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser after upgrading to 2.2.4

I had followed the install instructions to migrate to Tailwind 2.2.4.

Running python manage.py tailwind start from this produced some errors.

We traced the errors and it seemed there were missing packages.

Here’s the bash history

npm run nodemon
npm install npm-run-all --save-dev
npm install browser-sync --save-dev
npm install 
npm run tailwidcss
npm run tailwindcss
npm run tailwindcss -h
npm run tailwindcss 
npm run tailwindcss --postcss
npm run tailwindcss -- -h
npm run tailwindcss -- --postcss
npm run tailwindcss -- -h
npm run tailwindcss -- --postcss ./postcss.config.js 

Then running python manage.py tailwind start produces this error

CssSyntaxError: /theme/static_src/src/styles.scss:5:30: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

  3 | @tailwind utilities;
  4 | 
> 5 | @import "./file.scss";  // Comment
    |                   ^

Any ideas on how this can be fixed?

[dimitrismistriotis]

Other developer on @jaoxford 's team. @timonweb thanks again for your time.

[jaoxford]

We think it would be beneficial to other people to read our conclusion. Before that @timonweb thanks a lot for your time moreover coming back to us.

We decided to start rewriting our CSS to be more aligned with Tailwind’s approach of extracting components.

Through the use of either Django template partials with Tailwind utility classes or adding our custom styles to the Tailwind layers and then treating those like utility classes. For example (from the Tailwind docs):

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

& then in the HTML

<button class="btn-blue">
  Click me
</button>

Once we will rewrite everything to compile with Tailwind as “it should be” or as it is on version 2.1 of Django-tailwind, we will upgrade to the current, 2.2 and keep moving on from there.