phpcsslaraveltailwind-css

Laravel Tailwind CSS Not displaying in browser

I had a similar question previously. I'm still having problems so changed the question. I'll summarize suggested responses and why they did not work.

When I create a new project in laravel and add some tailwind css, the styles are not displaying in browser. I'm very new to laravel. I'm missing a step but don't know what.

I create new project with

composer create-project laravel/laravel testcssproject

I open the default blade at

resources/views/welcome.blade.php

Underneath this section in the default blade:

<p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.</p>

I add this

<p class="text-8xl font-bold text-red-500">This should be large, bold, and red</p>

So I expect to see my new paragraph underneath the default paragraph that states "Laravel offers...". The paragraph should be large, bold, and red.

When I load the page in the browser, I see

enter image description here

As you can see, the paragraph is there but it doesn't have any styling.

FIXES I'VE TRIED

  1. php artisan view:clear followed by restarting the server and a hard refresh. No difference.
  2. php artisan view:clear, php artisan cache:clear, php artisan routes:clear, php artisan config:clear, followed by restarting the server and a hard refresh. No difference
  3. npm run dev did nothing.
  4. A helpful user asked if I was seeing font-bold class in the inspector for the element. This is what I see when I inspect the paragraph I created

enter image description here

I don't get it. I assume Tailwind is working because all the styling from the default welcome.blade.php is showing. Why is my paragraph appearing but not getting styled?

Thanks for your help, G

EDIT:

After install breeze using all commands suggested in answer, I now see login and register options but paragraph is still not styled

enter image description here

EDIT 2:

Here is my tailwind config file. Is something missing?

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};
Solution

  • Use vite on your blade layout page