Update to tailwindcss v4

[chrisrhymes]

• Update dependencies to Tailwindcss v4
• Migrate the configuration to the main.css file (from tailwind.config.js)
• Remove need for aspect plugin and use built in aspect classes
• Upgrade gem versions
• Update theme to use action-light, action and action-dark custom colours instead of action-200, 500 and 900
• Add outline to links for better focus state visibility
• Use slate-50 instead of grey-100 to increase contrast between text and background colours.

[amazon-q-developer]

⏳ Code review in progress. Analyzing for code quality issues and best practices. Detailed findings will be posted upon completion.

Using Amazon Q Developer for GitHub

Amazon Q Developer¹ is an AI-powered assistant that integrates directly into your GitHub workflow, enhancing your development process with intelligent features for code development, review, and transformation.

Slash Commands

Command	Description
/q <message>	Chat with the agent to ask questions or request revisions
/q review	Requests an Amazon Q powered code review
/q help	Displays usage information

Features

Agentic Chat
Enables interactive conversation with Amazon Q to ask questions about the pull request or request specific revisions. Use /q <message> in comment threads or the review body to engage with the agent directly.

Code Review
Analyzes pull requests for code quality, potential issues, and security concerns. Provides feedback and suggested fixes. Automatically triggered on new or reopened PRs (can be disabled for AWS registered installations), or manually with /q review slash command in a comment.

Customization

You can create project-specific rules for Amazon Q Developer to follow:

1. Create a .amazonq/rules folder in your project root.
2. Add Markdown files in this folder to define rules (e.g., cdk-rules.md).
3. Write detailed prompts in these files, such as coding standards or best practices.
4. Amazon Q Developer will automatically use these rules when generating code or providing assistance.

Example rule:

All Amazon S3 buckets must have encryption enabled, enforce SSL, and block public access.
All Amazon DynamoDB Streams tables must have encryption enabled.
All Amazon SNS topics must have encryption enabled and enforce SSL.
All Amazon SNS queues must enforce SSL.

Feedback

To provide feedback on Amazon Q Developer, create an issue in the Amazon Q Developer public repository.

For more detailed information, visit the Amazon Q for GitHub documentation.

Footnotes

1. Amazon Q Developer uses generative AI. You may need to verify generated code before using it in your environment. See the AWS Responsible AI Policy. ↩

[amazon-q-developer]

Summary

This PR successfully migrates the project from Tailwind CSS v3 to v4, which is a significant upgrade that modernizes the styling approach. The migration includes several positive changes:

✅ Strengths:

• Proper migration of configuration from tailwind.config.js to CSS-based @theme configuration
• Consistent color token updates from numbered variants (action-200/500/900) to semantic names (action-light/action/action-dark)
• Good accessibility improvements with enhanced focus states and screen reader text
• Successful removal of the aspect-ratio plugin dependency in favor of native aspect classes
• Updated gem dependencies and improved contrast with slate-50 instead of gray-100

⚠️ Areas for Improvement:

• Focus state inconsistencies between different interactive elements need standardization
• Limited aspect ratio options in the inline source definition
• Some layout changes (hero image positioning, video wrapper removal) may cause unexpected behavior
• Inconsistent use of new vs old Tailwind class names (flex-grow vs grow)
• Very large max-width values may impact readability on wide screens

🔧 Action Items:
The most critical issues to address are the focus state standardization and ensuring consistent class name usage throughout all templates. The layout changes should be tested thoroughly to ensure no visual regressions.

Overall, this is a well-executed migration that brings the project up to modern Tailwind CSS standards while maintaining functionality and improving accessibility.