"Term Expected" error in tailwindcss generated css

Question

I am working on an node.js express project using EJS as template engine. I am developing this on Intellij Ultimate Edition. Intellij's tailwind css plugin is installed. I am using tailwindcss v3 as my css framework. I have followed their Get Started guide and I am using Tailwind CLI as my method of installation.

tailwind.config.js

module.exports = {
  mode: 'jit',
  content: ['./views/*.ejs'],
  theme: {
    extend: {},
  },
  plugins: [],
};

I am building the css like so:

npx tailwindcss -i source.css -o public/stylesheets/style.css --watch

source.css

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

So all is working fine, no issues, however I am a no error/warning in IDE kinda fellow (read OCD), and the error/warning shown in the IDE is bothering me and I want to know how to fix it OR if it is meant to be this way, then how to suppress it?

I have added a screenshot for reference. Let me know if more info is needed to debug, I'll be happy to provide them.

Answer 1

(Answering my own question)

So, looks like @tailwind base; is the culprit.

According to tailwind doc:

Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

Tailwind automatically injects these styles when you include @tailwind base in your CSS

Looks like this has some styles which Intellij thinks are wrong and hence shows errors/warnings. You can read more about it here.

Quick solution is to remove @tailwind base; from your source/input.css, and it seems safe to remove as long as you are fine having minor inconsistencies between browsers.

I will reconsider my decision of removing it as my app matures. Not sure if it is an IntelliJ issue or a Tailwind issue. Please advice and I can open up an issue accordingly.

EDIT: I found a way to disable IntelliJ inspection to just one file. This solution is imo a better one than removing @tailwind base from your source.css

You can do this by opening the culprit file and going over to the inspection bubble (top right, with checkmarks, crosses etc) and then click on Highlight:None.

I have also started a discussion on the tailwindcss git repo here.