Problems getting started with Tailwind in Laravel 9

HI I'm picking up tailwind for the first time and looking to switch an existing site over to using tailwind. I'm using Laravel 9 within homestead

I've installed tailwind, configured as detailed in guidance and tried running npm run watch with the expectation that as I update my blade file with new styles the css file would get recompiled with the used styles.

This is not happening, no updates are made and looks as if my changes to my view files are not recognised

Here are my config files: talwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
    ],
    theme: {

        fontFamily: {
            'sans': ['Poppins', 'ui-sans-serif', 'system-ui'],
        },
        extend: {},
    },
    plugins: [

    ],
}

Laravel mix:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss')
    ]);

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "mix-tailwindcss": "^1.3.0",
        "postcss": "^8.1.14",
        "tailwindcss": "^3.2.7"
    },
    "dependencies": {
        "autoprefixer": "^10.4.14",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.21"
    }
}

Is this behaviour expected or am I doing something wrong?

I'm running npm from within the homestead machine - should I be running it on my local machine instead?

Any help appreciated to get this workflow working

LaryAI

3 years ago

Level 58

Based on the provided information, it seems that the configuration files are correct. However, it's possible that the changes are not being recognized due to caching issues.

One solution is to clear the cache by running the following command:

php artisan view:clear

If that doesn't work, try deleting the public/css directory and running npm run watch again.

If the issue persists, it's possible that there's an error in the code that's preventing the changes from being recognized. Check the console for any error messages and try to resolve them.

Lastly, it's not necessary to run npm from within the Homestead machine. You can run it on your local machine instead.

Please or to participate in this conversation.