Upgrade to Tailwind CSS 4.1

[Copilot]

• [x] Update package.json to use Tailwind CSS 4.1 and remove PostCSS dependencies
• [x] Convert all // comments to /* */ format in CSS files
• [x] Convert tailwind.config.js to CSS-based configuration in style.css
• [x] Rename pcss directory and files to css for TW4 compatibility
• [x] Update RoboFile.php to use Tailwind CLI instead of PostCSS
• [x] Remove postcss.config.js and tailwind.config.js (no longer needed)
• [x] Add @tailwindcss/cli package for CLI binary
• [x] Fix import paths and theme variable names
• [x] Test the build process - compilation successful!
• [x] Verify output CSS is generated correctly - 52KB minified
• [x] Address code review feedback with documentation
• [x] Fix @theme configuration to preserve default utilities
• [x] Final verification complete - all default colors now generated

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Update to Tailwind 4</issue_title> <issue_description>- Use latest https://tailwindcss.com/ v 4.1

• Theme is under https://github.com/Gizra/drupal-starter/tree/3966a80acb71f3786307464989daee38147167b6/web/themes/custom/server_theme
• We no longer need postcss, we can use TW's cli
• We likely need to convert the comments from // style to the valid css syntax
• We want to maintain having nested css statements</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Gizra/drupal-starter#782

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[amitaibu]

Close, but not there yet

[amitaibu]

@copilot Looking at this element

<a href="https://example.com" class="  relative rounded-lg border border-gray-300 w-full h-full overflow-hidden
     flex flex-col gap-3 md:gap-5
 group justify-between p-6 overflow-hidden bg-gray-200 hover:bg-gray-700">

   ...

</a>

I see that bg-gray-X are missing. They miss also in other elements, so something with the config is off

[Copilot]

@copilot Looking at this element

...

Fixed in a63587d. The issue was that the @theme configuration was overriding default Tailwind colors and breakpoints instead of extending them. In Tailwind 4, @theme should only define custom extensions, not replace defaults.

Removed the font-family and breakpoint definitions from @theme, keeping only the actual custom properties (max-width-8xl and text-underline-offset-6). All default color utilities including bg-gray-50 and bg-gray-200 are now generated correctly.

[amitaibu]

@copilot I'm seeing the background colors defined, but they are struck out

The issue is that normalize overrides it

[amitaibu]

Removed core's normalize in favor of TW's one. Now backgrounds are working fine

[amitaibu]

The menu is still off

Header	Menu open

@balagan73 let's give it a 3h TB to try and fix, and do some QA, to find changes between this PR and the version on main

[balagan73]

Issue is core's .hidden class from stable modules hidden.module.css takes precedence over TW's .hidden class. I have spent 2h and still couldn't find a solution. I was expecting for example adding dependencies to fix the issue, but it did not solve the problem.

global-styling:
  css:
    theme:
      dist/css/style.css: {}
  dependencies:
    - system/base
    - core/stable

[balagan73]

the hidden.module.css can be overridden by adding /themes/contrib/stable/css/system/components/hidden.module.css: false to the .info.yml file, but then .visually-hidden class is missing and that also breaks the page.

[amitaibu]

the hidden.module.css can be overridden by adding /themes/contrib/stable/css/system/components/hidden.module.css: false to the .info.yml file, but then .visually-hidden class is missing and that also breaks the page.

So is it fixed, or not? :smile:

[balagan73]

@amitaibu Yes, it is fixed now after a few failed attempts. Had a break while working on it and just documented status here.

[amitaibu]

to the .info.yml file, but then .visually-hidden class is missing and that also breaks the page.

There's something broken still?

[balagan73]

@amitaibu No, that was the last problem I have encountered, but then overridden the problem file with a new instance where I have deleted .hidden class

[amitaibu]

@balagan73 I'm seeing two PRs, not sure which one is correct. Please make the PRs more clear