Tailwind not completely installed

I just installed the laravel breeze livewire starter kit, and although tailwind css is installed some elements have not been installed. For example, text-center is installed but text-right is missing. Similarly, font-semibold is there but font-bold is missing.

my app.css is: @tailwind base; @tailwind components; @tailwind utilities;

and my tailwind.config.js is import defaultTheme from 'tailwindcss/defaultTheme'; import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} / export default { 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: [forms],

};

When I look at the css file that is created in my public folder, those two elements are missing.

I haven't changed anything and just installed fro the direction. Any ideas what's wrong?

azimidev

1 year ago

Level 55

Tailwind automatically removes unused CSS by scanning your files based on the paths you provide in the content array in your tailwind.config.js. If some classes, like text-right and font-bold, are missing, it might be becus Tailwind couldn't detect them in your project.

export default {
  content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    './resources/views/**/*.php',
    './resources/js/**/*.vue', // If you're using Vue.js
    './resources/js/**/*.js',  // If you're using JS files
    './resources/**/*.blade.php', // Make sure this covers all Blade templates
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Figtree', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [forms],
};

then

npm install
npm run dev

php artisan view:clear
php artisan config:clear

1 like

agedgouda

1 year ago

Level 1

Thanks but that didn't work. When I ran npm run dev I got:

dev vite

Port 5173 is in use, trying another one...

VITE v5.4.9 ready in 223 ms

➜ Local: http:// localhost:5174/ ➜ Network: use --host to expose ➜ press h + enter to show help

LARAVEL v11.28.1 plugin v1.0.5

➜ APP_URL: http:// localhost

and the CSS wasn't rebuilt with the tags, it just started a new instance that I didn't want. I ran the two artisan commands after just in case, but it didn't help.

Where have I gone wrong?

agedgouda

1 year ago

Best Answer

Level 1

I fixed it, the command was npm run build, not npm run dev.

Thanks again for your help, without you letting me know about tailwind automatically removing unused CSS I would've continued to pull what's left of my hair out!

Please or to participate in this conversation.