Tailwind adds space after a colon for paged media (print css)

What version of Tailwind CSS are you using? 3.1.8

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

What version of Node.js are you using? v18.9.1

What browser are you using? Chrome

What operating system are you using? macOS

Reproduction URL https://play.tailwindcss.com/gF6jqBljqr?file=css

Describe your issue

VSCode inserts a space after a colon for paged media.

For example, the below could should not have space between : & first

@page: first{
  size: 5.5in 8.5in;
  margin: 0;
}

It should look like:

@page:first {
  size: 5.5in 8.5in;
  margin: 0;
}

If you open the Tailwind Play & click Tidy on CSS tab, you will see how it gets formatted.

This has been discussed before but those solutions don’t work for me. Probably, because I’m using Paged Media.

I tried inserting the following in .vscode/settings.json:

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

But it didn’t work.

[adamwathan]

Looks like it’s actually fine, you just need to write it with a space after @page.

Here’s the example from MDN:

Does that work with Prince? Prettier handles it properly if you write it that way anyways 👍

[deadcoder0904]

can confirm, that works with prince & prettier formats it correctly. thanks adam 😃