Update TailwindCSS to v4 and added sample config for TALL Stack compatibility. #167
Conversation
There was a problem hiding this comment.
Can we keep the Tailwind in the app.scss instead? Also maybe lets use this opportunity to rename app.scss to app.css since many important sass features like nesting are supported by PostCSS.
At the same time, rename sass to css
There was a problem hiding this comment.
Done! I did test the package locally on a fresh build as well it seems to work fine.
|
As per Tailwind CSS's official documentation, when using Tailwind CSS with PostCSS, only @tailwindcss/postcss and postcss are required. |
|
Sure, but we're using it with Vite @n355, which is the default Laravel project implementation Nesting is already supported in Tailwind 4 without extra plugins AFAIK |
src/TallPreset.php
Outdated
| @@ -15,7 +15,9 @@ class TallPreset extends Preset | |||
| 'resolve-url-loader' => '^3.1', | |||
| 'sass' => '^1.3', | |||
| 'sass-loader' => '^8.0', | |||
| 'tailwindcss' => '^3.4', | |||
| 'tailwindcss' => '^4.0', | |||
| '@tailwindcss/postcss' => '^4.0', | |||
There was a problem hiding this comment.
I don't think we need this, right?
src/TallPreset.php
Outdated
| 'sass' => '^1.3', | ||
| 'sass-loader' => '^8.0', |
There was a problem hiding this comment.
And I don't think we need these, can you check the rest of the deps please?
|
@danharrin I tested a Laravel 12 project with Note that Tailwind 4's default nesting doesn't support the |
|
Look at the Laravel 12 skeleton, there is no Postcss at all |
|
I am well aware that Laravel 12 comes without a PostCSS config, but since I saw in this PR that you were planning to keep it, I was speaking in context—meaning I uninstalled the default Vite plugin to switch to a PostCSS-only setups. |
|
I think we should use this PR to slim down the changes required to use the preset, so that means completely removing PostCSS, sass, etc. It will be clearer to people familiar with Laravel 12. We can drop nesting support out of the box if we don't use it in any of our code either. |
…oving @tailwindcss/vite and sass, and set PostCSS as default. Added @tailwindcss/nesting for better nesting support and fixed PostCSS config.
|
in the last commit I cleaned up package list by removing @tailwindcss/vite and Sass, and set PostCSS as default. Added @tailwindcss/nesting for better nesting and fixed PostCSS config. I tested it and it works well and blazing fast. |
I believe keeping PostCSS and nesting functionality would facilitate an easier migration to the newer version of Laravel and the TALL stack while maintaining backward compatibility. Speaking from experience, I've used this package in most of my Laravel projects, and these features have been quite beneficial. |
|
This package is for new projects only and not upgrading existing projects, so please remove PostCSS and nesting to keep the installation minimal @omimouni |
|
@omimouni I just ran into build issues with the @tailwindcss/nesting plugin. Turns out it’s not maintained and doesn’t work properly. I’d recommend sticking to the official method with the Vite plugin instead, as @danharrin suggests. |
|
@n355 @danharrin I kept only the minimal packages for Tailwind CSS to work and configured Vite to match Laravel 12's default setup. I think this is all set now |
There was a problem hiding this comment.
Lodash is no longer installed by default so we can remove that
Tailwind and Tailwind Vite don't need to be added since they are already in the skeleton
stubs/default/vite.config.js
Outdated
There was a problem hiding this comment.
This file can be removed since its the same as the default vite.config.js in the app
…ages that comes with laravel 12
Yes seems like actions/cache v1 was deprecated, I did change it to version v4! |
|
Thank you |
Description:
Laravel 12 ships with TailwindCSS 4 by default, which causes compatibility issues when installing and using the TALL stack. This PR updates the necessary packages and adds a sample TailwindCSS 4 configuration file, ensuring it follows the same approach as the forms and typography plugins.