1

In a brand new Laravel 10 project, based on the Breeze blade starter theme, I simply try to change the text color on the welcome screen, but it does not work. I replace in welcome.blade.phpat one of the paragraphs text-gray-500 with text-blue-500, and expect to see blue text. Instead, the browser renders the text in its default black, because the text-blue-500css class does not exist. I expected the Vite server, which is running in the background, to take care of this... What am I missing here?

To reproduce under Linux, simply run this:

curl -s https://laravel.build/l10 | bash
cd l10
./vendor/bin/sail up -d
./vendor/bin/sail composer require laravel/breeze --dev
 ./vendor/bin/sail artisan breeze:install
# Now select 0 for Blade, and No, No for the other 2 questions
./vendor/bin/sail artisan migrate
./vendor/bin/sail npm i
./vendor/bin/sail npm run dev

Changing the styles with classes that already exist in the template is no problem, but adding in new Tailwind classes does not work.

Also, when running ./vendor/bin/sail npm run build, I can see that a css file is created under public/build/assets, and that file actually includes the text-blue-500 class. However that file does not seem to be used on the localhost server... When using the Vue template, and making that same color change in the Welcome.vue file, it works without any issue.

Stiegi
  • 1,074
  • 11
  • 22

1 Answers1

0

You may need to run sail npm run build each time you use some new Tailwind classes. This will compile the new classes into public/build/assets/app-**.css. Once done, the request to Sail’s localhost port should work as expected.

huang can
  • 1
  • Then every change in a blade design implies a new "compilation"? It makes the work more difficult and slower. Is there any way to use Bootstrap? – Juan Jun 12 '23 at 19:09