"Invalid declaration" error when import has semicolon

[NoahStahl]

What version of Tailwind CSS are you using?

v4.0.3

What build tool (or framework if it abstracts the build tool) are you using?

@tailwindcss/cli 4.0.3

What version of Node.js are you using?

v22.13.1

What browser are you using?

Chrome

What operating system are you using?

Windows

Describe your issue

Following the installation instructions docs for CLI, step two is to create a css file with content:

@import "tailwindcss";

When I do this an run the build command in step 3, it fails with error:

Error: Invalid declaration: `@import "tailwindcss"`

However, when I remove the semicolon on the import line, build succeeds. This avoids the error:

@import "tailwindcss"

** Expected behavior **

The semicolon should be optional, or the CLI should not fail when it is provided as documented.

[wongjn]

Consider checking if your input CSS file has been encoded as UTF-8 with BOM. If so, try resaving it with encoding UTF-8.

[shaurya0655]

Worked! In VS2022 .css file is saved in UTF-8 BOM, used notepad++ to change encoding.
Thanks.

[LordJellyfish13]

In case you are using VS CODE you can also change encoding in the bottom of the window.
There it will show what encoding it uses. Click on it and select "Save with encoding" and then select UTF-8.

[NoahStahl]

Thanks for reply. Yes, my source file is encoded UTF-8 with BOM, and changing to UTF-8 prevents the error. I'd hope this would be considered a bug, and Tailwind would not fail on this. At the very least, the error should tell you it refuses to work with BOM encoding?

My files in v3 have always been BOM encoded, never had any trouble.

[seeker-dev]

My input file is saved as UTF-8 with BOM, but I still get the same error message.

[wongjn]

Try saving it as UTF-8 instead (i.e. without BOM).

[seeker-dev]

That worked. Thank you.

[romainZer]

Still have the same problem here, if I remove the semicolon everything goes right but from the time I copy the exact @import "tailwindcss"; on the website I get the Invalid declaration: @import "tailwindcss" error

[wongjn]

Did you check the encoding is UTF-8 and not UTF-8 with BOM? Otherwise consider providing a git repo that reproduces the issue please.

[romainZer]

Ok yeah I checked it and it was indeed encoded with BOM

[Aracif]

Im sorry, there is no nice way to say this. For the love of , ******* why couldn't some take the time to write 5 additional lines of code to indicate the actual error rather than a useless error, "Invalid declaration". I think it is well worth it to create ticket to add actual error handling for this case. I'd be willing to implement it myself.

[a89529294]

Im facing this issue, but my file is encoded in utf-8, without BOM. This only happens on windsurf, on vscode it's fine

[dimaslanjaka]

My CSS input is

@import "tailwindcss";

console logs

D:\Repositories\php-proxy-hunter>yarn dlx @tailwindcss/cli -i ./tailwind.input.scss -o ./src/react/component/theme.css
➤ YN0000: · Yarn 4.9.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @tailwindcss/cli@npm:4.1.11, @ampproject/remapping@npm:2.3.0, and 159 more.
➤ YN0000: └ Completed in 1s 270ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 129 packages were added to the project (+ 37.74 MiB).
➤ YN0000: └ Completed in 0s 367ms
➤ YN0000: ┌ Link step
➤ YN0007: │ @parcel/watcher@npm:2.5.1 must be built because it never has been before or the last one failed
➤ YN0007: │ @tailwindcss/oxide@npm:4.1.11 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 8s 269ms
➤ YN0000: · Done in 9s 966ms

≈ tailwindcss v4.1.11

Error: Invalid declaration: `// @tailwind base`

D:\Repositories\php-proxy-hunter>

how to fix?

tailwind.config.js

import flowbitePlugin from 'flowbite/plugin';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.tsx', './src/**/*.jsx', './index.html', './node_modules/flowbite/**/*.js'],
  theme: {
    extend: {}
  },
  plugins: [flowbitePlugin]
};

[wongjn]

You sure your tailwind.input.scss file only has:

@import "tailwindcss";

From the error message, it seems like it has:

// @tailwind base

somewhere in it too.

You should only use CSS with Tailwind, without Sass, Less, Stylus, etc.

[rozsazoltan]

From v4 onwards, we no longer use the tailwind.config.js file. Instead, we have switched to CSS-first configuration by default. Useful links:

• Upgrade guide
• What's breaking changes from v4?
• Tailwind CSS v4: more packages and new Vite support
• How to switch to a CSS-first configuration in Tailwind CSS v4 and above

content property no longer needed:

• Automatic Source Detection from TailwindCSS v4
• Adding an external source or a package from within node_modules for detection

@tailwind directives deprecated:

• Removed @tailwind directives