tailwinds not compiling

Hello,

I started messing with getting vite to work with Laravel Homestead and It sort of does. It connects and builds when updates are done, and auto refreshes (which I don't know if i like).

The problem is the CSS file is not building. The JS file is built but the CSS in the 'assets/app-179954eb.css' is the same contents as the one in 'resources/css/app.css'. I even tried the 'npm run build' I still get the same resulting file:

@tailwind base;@tailwind components;@tailwind utilities;

And of course tailwinds doesn't work on the pages anymore. I have tailwinds, postcss, and autoprefixer all install in npm.

Here are my configurations, incase someone sees something that is not right.

Tailwinds.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
const colors = require('tailwindcss/colors')

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

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                brown: {
                    50: '#fdf8f6',
                    100: '#f2e8e5',
                    200: '#eaddd7',
                    300: '#e0cec7',
                    400: '#d2bab0',
                    500: '#bfa094',
                    600: '#a18072',
                    700: '#977669',
                    800: '#846358',
                    900: '#43302b',
                },
            }
        },
    },

    plugins: [forms, typography],
};

Vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        hmr: {
            protocol: 'ws',
            https: false,
            host: "192.168.10.10",
        },
        host: "192.168.10.10",
        https: false,
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    css: {
        postcss: {
            plugins: [

            ],
        },
    },
});

Postcss.config.js

export default {
    plugins: {
        tailwindcss: { config: './tailwind.config.js' },
        autoprefixer: {},
    },
};

I was not using vite before simply because it didn't work with Homestead, or until i updated the configuration. I added a npm run option to build the CSS and then included that in my app layout. That still works, it does build the CSS file.

Snip Package.json

"scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "watch": "vite build --watch",
        "start:css": "tailwindcss -i resources/css/app.css -o public/assets/css/tailwind.css --watch"
    },

I started this last night after work, and thought I would post my issue today while I am waiting on another process to complete.

Does anyone see anything off in the configs? or know a reason why the app.css won't build.

Thanks Terre

LaryAI

2 years ago

Level 58

Based on the provided information, it seems that the CSS file is not being built correctly when using Vite with Laravel Homestead. Here are a few steps you can take to troubleshoot and resolve the issue:

Make sure you have installed all the required dependencies by running npm install in your project directory.
Check if there are any errors or warnings in the console when running npm run dev or npm run build. If there are any errors, resolve them first.
Verify that the paths in your configuration files are correct. Double-check the file paths in vite.config.js, postcss.config.js, and tailwind.config.js to ensure they match the actual file locations.
Ensure that the resources/css/app.css file exists and contains valid CSS code. If the file is empty or contains only the @tailwind directives, it won't generate the expected output.
Check if there are any conflicting CSS or PostCSS plugins that might interfere with the build process. In your vite.config.js file, under the css.postcss.plugins section, make sure there are no conflicting plugins or empty arrays.
Try removing the refresh: true option from the laravel plugin configuration in vite.config.js. This option might be causing the CSS file to be regenerated with the same content.
If none of the above steps work, try running the build command with the --debug flag (npm run build -- --debug) to get more detailed information about the build process and any potential errors.

Here's an example of how your vite.config.js file could look after making the necessary changes:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        hmr: {
            protocol: 'ws',
            https: false,
            host: '192.168.10.10',
        },
        host: '192.168.10.10',
        https: false,
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
        }),
    ],
    css: {
        postcss: {
            plugins: [
                require('tailwindcss')('./tailwind.config.js'),
                require('autoprefixer'),
            ],
        },
    },
});

Remember to run npm run dev or npm run build after making these changes to see if the CSS file is now being generated correctly.

If you're still experiencing issues, it might be helpful to provide more details about any error messages or warnings you're encountering during the build process.

TerrePorter

2 years ago

Level 12

ok, it looks like I needed to remove the entire CSS block from the vite config. The code that Mr. Lary provided didn't work, but it was a empty array. That seems to have worked, the page now has tailwinds CSS working.

Please or to participate in this conversation.