Tailwind Colors not compiling when used with Laravel Jetstream

Question

I have a Laravel Jetstream installation and use Tailwind CSS however the default colors do not work when using the tailwind components.

I only want to use the default colors and not custom yet.

tailwind.config.js

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

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

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

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

Jetstream came installed with Tailwind 2.2.2 which exhibits this issue. I have tried downgrading to 2.0.2 which was the latest version where this has been known to work for me but that also exhibits the issue

When using the same HTML code does work correctly when used in a Laravel Breeze using tailwind 2.0.2 installation.

example html

<div class="flex-shrink-0 flex items-center justify-center w-16 bg-pink-600 text-white text-sm font-medium rounded-l-md">
</div>

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": {
        "@tailwindcss/forms": "^0.3.1",
        "@tailwindcss/typography": "^0.4.0",
        "alpinejs": "^3.0.6",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^2.2.2"
    },
    "dependencies": {
        "daisyui": "^1.13.2"
    }
}

in the example above the bg-pink-600 does not render.

npm run dev, I've just tried a fresh jetstream install to make sure that I didn't somehow misconfigure it but the same thing happens on a fresh install too — cinameng
– cinameng, Commented Aug 30, 2021 at 20:50
it's now working OK and I'm not quite sure what I have done to resolve the issue — cinameng
– cinameng, Commented Aug 31, 2021 at 6:22
ok. Have you perhaps run npm build or prod once? By default, tailwindCss only purged in production. maybe it came to the cache problem. that he had the prod css in the cache. If it happens again, clear the browser cache or open another browser. — Maik Lowrey
– Maik Lowrey, Commented Aug 31, 2021 at 7:28

Pathros · Accepted Answer · 2021-11-25 17:21:35Z

3

You have to add the specific colors you need, available from the TailwindCSS palette, inside your tailwind.config.js file like so:

tailwind.config.js

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

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

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php'
    ],

    theme: {
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            //amber: colors.amber,
            black: colors.black,
            blue: colors.blue,
            cyan: colors.cyan,
            emerald: colors.emerald,
            fuchsia: colors.fuchsia,
            gray: colors.trueGray,
            blueGray: colors.blueGray,
            coolGray: colors.coolGray,
            //trueGray: colors.trueGray,
            warmGray: colors.warmGray,
            green: colors.green,
            indigo: colors.indigo,
            lime: colors.lime,
            orange: colors.orange,
            pink: colors.pink,
            purple: colors.purple,
            red: colors.red,
            rose: colors.rose,
            sky: colors.sky,//warn - As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`.
            teal: colors.teal,
            violet: colors.violet,
            yellow: colors.amber,
            white: colors.white,
        },
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

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

Tip You can actually check the available default colors inside the node_modules/tailwindcss/colors.js file.

Once selected your colors and saved the file, now run again

npm run dev

Now refresh the caché of your web browser and reload the page (you'll probably have to sign in again into your Laravel application)

edited Nov 25, 2021 at 17:21

answered Nov 25, 2021 at 17:16

Pathros

10.8k21 gold badges103 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sba Over a year ago

The actual color definitions are located in node_modules/tailwindcss/lib/public/colors.js. Still..how do you use them? Instead of text-green-500 you use text-green? I am using tailwind 3.1 in Laravel 9 but just cant it work in div´s inside blade files.

JayDee Over a year ago

doesn't work for me. I use laravel 9.5 & "tailwindcss": "^3.3.2" But same on Larvel 8 and 10 tailwindcss 3.0 or 3.1 have to switch everytime to bootstrap :/

Mario Ariyanto · Accepted Answer · 2022-07-25 04:23:45Z

This is more like an update to Pathros's answer as some color has been renamed as of Tailwind CSS v3.0

theme: {
    colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: colors.black,
        blue: colors.blue,
        cyan: colors.cyan,
        emerald: colors.emerald,
        fuchsia: colors.fuchsia,
        slate: colors.slate,
        gray: colors.gray,
        neutral: colors.neutral,
        stone: colors.stone,
        green: colors.green,
        indigo: colors.indigo,
        lime: colors.lime,
        orange: colors.orange,
        pink: colors.pink,
        purple: colors.purple,
        red: colors.red,
        rose: colors.rose,
        sky: colors.sky,
        teal: colors.teal,
        violet: colors.violet,
        yellow: colors.amber,
        white: colors.white,
    },
    extend: {
        fontFamily: {
            sans: ['Nunito', ...defaultTheme.fontFamily.sans],
        },
    },
},

Here's the result when I add the code above, using Daisyui

GigaTera · Accepted Answer · 2022-08-31 13:41:46Z

0

I also got the same problem

you can just clear "all cache" in your browser, log out of account and log back in, it will fix your problem.

answered Aug 31, 2022 at 13:41

GigaTera

1,33713 silver badges17 bronze badges

Comments

InovaXion · Accepted Answer · 2023-06-06 10:58:46Z

0

i also got the same problem and find another solution.

tailwind config was looking great but helloworld wasn't in my CSS bundle :

theme: {
        extend: {
            fontFamily: {
                sans: ["Arizona", ...defaultTheme.fontFamily.sans],
            },
            colors: {
                helloworld: "#002773",
            },
        },
    },

Looks like if you dont use the color in your project (class text-helloworld for example) it didnt compil it.

answered Jun 6, 2023 at 10:58

InovaXion

192 bronze badges

Collectives™ on Stack Overflow

Tailwind Colors not compiling when used with Laravel Jetstream

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related