pedroroccon's avatar

Tailwind CSS not generating complete CSS using Laravel 10 + Vite

Greetings! I'm starting a brand new project using Laravel 10x and Tailwind, so I configured Sail and start making my components.

For some reason, when I compile my assets using the command npm run dev, some Tailwind styles won't appear in the final CSS file. Someone knows what I'm doing wrong?

Here is my tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./byustechnology/**/*.blade.php",
  ],
  theme: {
    extend: {},
    fontFamily: {
      sans: ["Quicksand", "sans-serif"],
    },
  },
  plugins: [],
}

And my vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        hmr: {
            host: 'localhost',
        }
    },
    plugins: [
        laravel({
            input: ['resources/byustechnology/runadm/css/app.css', 'resources/byustechnology/runadm/js/app.js'],
            refresh: true,
        }),
        vue()
    ],
});

I start my VM with sail up -d, and them compile my assets with sail npm run dev, and some styles like colors (indigo color) are missing, but other styles like color green not.

What I'm doing wrong?

0 likes
13 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

It looks like you have your configuration set up correctly. One thing to check is that you are running the correct command to compile your assets. The command should be npm run dev and not sail npm run dev.

If that doesn't work, you can try running npm run watch instead. This will watch for any changes you make to your Tailwind config and automatically recompile your assets.

If that still doesn't work, you can try running npm run build to manually build your assets. This will generate a tailwind.css file in your public/css directory.

If none of these solutions work, you can try running npm run production to generate a minified version of your Tailwind CSS.

Hope this helps!

1 like
pedroroccon's avatar

@LaryAI I need to use the sail npm run dev because i'm using Sail as my virtual machine, so I need to start this command inside my sail virtual machine.

The npm run watch isn't avaliable (I'm using Vite). I tried to generate with npm run build. It works, but the result is the same that before (without showing some color styles)

webrobert's avatar

some like what? Are they compiled class names. Where have you defined the indigo. Where is it used?

pedroroccon's avatar

@webrobert I'm using indigo as a default color value for a Blade component

<?php

namespace ByusTechnology\Canvas\View\Components;

use Illuminate\View\Component;

class Button extends Component
{

    const SIZES = [
        'xs' => 'px-2.5 py-0.5 text-xs',
        'sm' => 'px-3 py-2 text-sm',
        'md' => 'px-4 py-2 text-sm',
        'lg' => 'px-4 py-2 text-base',
        'xl' => 'px-6 py-3 text-base',
    ];

    const ROUNDED_SIZES = [
        'xs' => 'rounded',
        'sm' => 'rounded-md',
        'md' => 'rounded-md',
        'lg' => 'rounded-md',
        'xl' => 'rounded-md',
    ];

    public $tag;

    public $color;

    public $size;

    public $type;

    public $grouped;

    public function __construct($color = 'indigo', $size = 'md', $type = 'primary', $tag = null, $grouped = false)
    {
        $this->tag = ! empty($tag) ? $tag : 'a';
        $this->color = $color;
        $this->size = $size;
        $this->type = $type;
        $this->grouped = $grouped;
    }

    public function attributes()
    {
        $attributes = $this->attributes->class([
            "inline-flex items-center border font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2", // Base attributes
            self::SIZES[$this->size], // Size attributes
            $this->grouped ? 'rounded-none' : self::ROUNDED_SIZES[$this->size],
        ]);

        if ($this->type == 'primary') {
            $attributes = $attributes->merge(['class' => "border-transparent text-white bg-{$this->color}-600 hover:bg-{$this->color}-700 focus:ring-indigo-500"]);
        }

        if ($this->type == 'secondary') {
            $attributes = $attributes->merge(['class' => "border-transparent text-{$this->color}-700 bg-{$this->color}-100 hover:bg-{$this->color}-200 focus:ring-{$this->color}-500"]);
        }

        if ($this->type == 'white') {
            $attributes = $attributes->merge(['class' => "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-{$this->color}-500"]);
        }

        return $attributes;
    }


    public function render()
    {
        return view('canvas::button');
    }
}

But for some reason the indigo color won't be compiled by sail npm run dev

webrobert's avatar
webrobert
3 years ago
Best Answer
Level 51

@pedroroccon, tailwind isn't going to look in your php files for classes as far as I am aware. You are [also] programmatically making them. You will have to safe list them as I suggested.

1 like
pedroroccon's avatar

@webrobert I tried to adjust my folder in tailwind.config.js, but no success. Yesterday when I was developing, everything was working as expected. This occurred only today when I needed to run npm run dev again.

pedroroccon's avatar

@webrobert I don't know that! Thanks for helping me! I'll adjust my classes and my Tailwind config file.

1 like
webrobert's avatar

@pedroroccon, I know and its super annoying. It's always something silly. My safelist often has a few values on it. But generally I try not to write code that prevents them from being picked up. and no problem!

1 like
Regi44's avatar

I got the same issue. Some classes are randomly not loaded into the css file while most others are. Is there an other solution, but adding all of those classes manually to the safelist?

Please or to participate in this conversation.