Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support TailwindCSS 4.0 #452

Open
wants to merge 13 commits into
base: 2.x
Choose a base branch
from
Open

Support TailwindCSS 4.0 #452

wants to merge 13 commits into from

Conversation

itxshakil
Copy link
Contributor

This PR introduces support for TailwindCSS 4.0 in the Laravel Breeze starter kit. It ensures compatibility with the latest version of TailwindCSS, offering improved utility classes, enhanced performance, and better developer experience.


Changes:

  1. Updated TailwindCSS Version:
    • Upgraded tailwindcss dependency to ^4.0.
    • Adjusted configuration files to match the new TailwindCSS 4.0 structure.
  2. Configuration Adjustments:
    • Ensured compatibility with Laravel Mix and Vite, adapting build processes as needed.
    • Modified tailwind.config.js to align with updated syntax and features of TailwindCSS 4.0.
  3. CSS and Component Updates:
    • Updated existing CSS classes in default views to avoid deprecated or removed utilities.
    • Verified and fixed any compatibility issues with new features, such as the removal of certain defaults or changes to class behaviors.

References:

Please review and test the changes. Feedback and suggestions are welcome!

@Jubeki
Copy link
Contributor

Jubeki commented Jan 24, 2025

Similar to the skeleton PR: laravel/laravel#6523

How about replacing @tailwindcss/postcss with @tailwindcss/vite.

The app.css should also contain the source and the font-family.

@Jubeki
Copy link
Contributor

Jubeki commented Jan 24, 2025

In the InstallStack Files there is postcss listed, but I think it should be replaced with @tailwindcss/vite and the the vite.config.js should be adjusted accordingly.

autoprefixer can also be removed according to the upgrade guide:
https://tailwindcss.com/docs/upgrade-guide#using-postcss

@itxshakil
Copy link
Contributor Author

In the InstallStack Files there is postcss listed, but I think it should be replaced with @tailwindcss/vite and the the vite.config.js should be adjusted accordingly.

autoprefixer can also be removed according to the upgrade guide: https://tailwindcss.com/docs/upgrade-guide#using-postcss

Thanks, I did the changes now

Signed-off-by: Shakil Alam <[email protected]>
@itxshakil itxshakil marked this pull request as draft January 24, 2025 12:13
@Jubeki
Copy link
Contributor

Jubeki commented Jan 24, 2025

@itxshakil I think the problem with the tests is, that the postcss.config.js still exists on the laravel/laravel repository.

PR for Tailwind v4: laravel/laravel#6523

I think the only way to fix this, is to temporarily delete the postcss.config.js during the Tests run (Github Actions Workflow)

@Jubeki
Copy link
Contributor

Jubeki commented Jan 24, 2025

Or you can keep/add the following statement again:

$files->delete(base_path('postcss.config.js'))

@itxshakil itxshakil marked this pull request as ready for review January 24, 2025 15:39
@itxshakil
Copy link
Contributor Author

Or you can keep/add the following statement again:

$files->delete(base_path('postcss.config.js'))

Thanks again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants