chore(setup): Install and Configure Tailwind CSS

[nitro56565]

Closes #374

This PR integrates Tailwind CSS into the project to begin the transition from Ant Design to a more modular and performant utility-first CSS approach.
To prevent layout and styling conflicts with existing Ant Design components, Tailwind's preflight (CSS reset) has been disabled.

Changes

Installed tailwindcss, postcss, and autoprefixer

Added Tailwind configuration files: tailwind.config.js, postcss.config.js

Disabled Tailwind’s preflight (reset) via corePlugins: { preflight: false } to avoid breaking existing AntD layout/styling

Imported Tailwind’s base styles in the main CSS file (globals.css, index.css, or equivalent)

Verified that existing Ant Design components render correctly without layout shift

Added Tailwind to the content path for future utility-based development

Flags

• Preflight is disabled only during this transitional phase.

Related Issues

• Issue chore(setup): Install and Configure Tailwind CSS #374
• Pull Request chore(setup): Install and Configure Tailwind CSS #378

Author Checklist

• Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• Vital features and changes captured in unit and/or integration tests
• Commits messages follow AP format
• Extend the documentation, if necessary
• Merging to gsoc-feature-branch from fork:branchname

[akshatbatra]

@nitro56565
Given that we don't use Next.js but Vite and React Router DOM...could Tailwind CSS Vite plugin be a better way to add Tailwind CSS to the project?
Reference

[nitro56565]

@nitro56565
Given that we don't use Next.js but Vite and React Router DOM...could Tailwind CSS Vite plugin be a better way to add Tailwind CSS to the project?
Reference

We are not using tailwind v4.1 as it still has a lot of compatibility issues.The tailwind vite plugin was released for v4.1 not for v3.4.17 therefore I am using postcss to implement tailwind in our project.

[akshatbatra]

@nitro56565

Do we have any compatibility issues with the existing dependencies or are we limiting ourselves due to browser compatibility concerns?
v4 supports the following browsers:

• Chrome 111 (released March 2023)
• Safari 16.4 (released March 2023)
• Firefox 128 (released July 2024)

Firefox is a bit more recent but should we be worried about more than 2 years old Chrome?

Practically, mobile browsers are a concern as they may have different compatible versions, but we aren't targeting mobile anyway.

I have a tendency to prefer the latest versions of packages, but if we are having any issues with v4 and our existing dependencies, staying on v3 is better.

[akshatbatra]

Setting preflight:false prevents breaking existing AntD layout but it omits some important tailwind base styles and that breaks any newly added Tailwind CSS code. For e.g., this is what AI Assistant Panel looks like with preflight disabled:

Tailwind CSS styles aren't applied due to preflight:false.

However, enabling preflight, messes up the existing AntD Learn button:

After testing some solutions to this problem, I've found one:

Replace the following line of code in index.css-

@tailwind base;

with

@layer tailwind-base, antd;

@layer tailwind-base {
  @tailwind base;
}

Once this change is made, preflight doesn't have to be disabled.

This doesn't mess up the Learn button and also the newly added components utilizing Tailwind CSS are rendered correctly. Kindly test this at your end and see if any unexpected behavior is encountered. Without fixing this, Tailwind CSS and AntD components can't co-exist.

[nitro56565]

Hey @akshatbatra Preflight was a temporary thing which was eventually going to get reset after total migration but I'll surely check your approach and will test it if everything works fine I'll implement it.👍🏼

[akshatbatra]

@nitro56565
I did some more testing and found that there still are some issues with Tailwind CSS and AntD interoperability even after using the @layer solution in index.css that I talked about in my previous comment.

Further research revealed that the right way to achieve what we want is to add tailwindcss-scoped-preflight as a dev dependency and then enabling preflight in a scoped way for new Tailwind CSS components that we want to incrementally merge into main while AntD components are still there.

I've tested this solution and it works, We don't need to create a custom isolation strategy, already available isolateInsideOfContainer is enough for our use case.

Something to decide:

Merging this PR as it is, doesn't break any existing code, but it breaks the newer Tailwind CSS code that we will merge in forthcoming PRs. AI Assistant panel will probably be the first Tailwind CSS based component to be merged into main, I can set up tailwindcss-scoped-preflight in the upcoming AI Assistant PR itself or you can set that up in this PR.

@DianaLease could you please chime in and comment on whether tailwindcss-scoped-preflight should be added in this PR or the forthcoming AI Assistant Panel PR?