Tailwind Colors does not work

ok have to change my tailwind.conf. from

important: false,
    theme: {
        colors: {
            red: colors.red,
        },

    safelist: [],

important: true,
    theme: {
        colors: {
            red: colors.red,
        },

    safelist: [
        'bg-red-500',
    ],

and class in html from !bg-red-500 to bg-red-500 and know I have red Background but buttons have update the padding too ... from 1rem to 1.125rem --> I doesn't change parts for padding.

Oh wait .. . same done with green and blue

safelist: [
        {
            pattern: /bg-(red|green|blue)-(100|200|300|400|500)/,
          },
    ],

and BLUE does not working... why ???

It works only with -500. Colors with -400 are all gray

jaseofspades88

2 years ago

Level 51

Are you using webpack or vite for your tailwind configuration? It's better if you update your content array within your tailwind.config.js to auto detect the classes used within the respective files. You can even use wildcards to locate all files.

 content: [
        './resources/views/*/*.blade.php',
    ],

This will detect all .blade.php files within each directory within the views directory

bluesafety

2 years ago

Level 2

@jaseofspades88 I using webpack .... here part of my config ... and now ?

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

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

ok I test with vite

bluesafety

2 years ago

Level 2

Ok with vite same Problem. I only compile resources/css/app.css and no js or else... and in app.css is only this code:

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

here my tailwind.conf.

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

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


    important: false,
    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,
        },
        fontSize: {
            'xs': '0.75rem',
            'sm': '0.8rem',
            'base': '1rem',
            'lg': '1.125rem',
            'xl': '1.25rem',
            '2xl': '1.5rem',
            '3xl': '2rem',
            '4xl': '2.4rem',
            '5xl': '3rem',
        },

        extend: {
            fontFamily: {
                sans: ["Nunito", ...defaultTheme.fontFamily.sans],
            },
            inset: {
                '3px': '3px',
            },
            borderRadius: {
                'md': '12px',
                'xl': '2rem',
                '3xl': '50px'
            },
        },
        minWidth: {
            '1/4': '25%',
        }
    },

    corePlugins: {
        aspectRatio: false,
    },


    safelist: [
        {
            pattern: /bg-(red|green|blue)-(100|200|300|400|500|600|700|800|900)/,
          },
    ],

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

ezenteno

2 years ago

Level 2

Remember run, npm run dev or npm run build after saver your changes.

bluesafety

2 years ago

Best Answer

Level 2

@ezenteno to run build I need correct script. On my is build for vite and I add development and watch for mix so I can tested both.

"scripts": {
        "dev": "vite",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "build": "vite build"
    },

Solution for me ... I use now colors form bootstrap. Worked very fine :)

$theme-colors: map-merge($theme-colors, $blues);
$theme-colors: map-merge($theme-colors, $indigos);
$theme-colors: map-merge($theme-colors, $purples);
$theme-colors: map-merge($theme-colors, $pinks);
$theme-colors: map-merge($theme-colors, $reds);
$theme-colors: map-merge($theme-colors, $oranges);
$theme-colors: map-merge($theme-colors, $yellows);
$theme-colors: map-merge($theme-colors, $greens);
$theme-colors: map-merge($theme-colors, $teals);
$theme-colors: map-merge($theme-colors, $cyans);

rtconner

2 years ago

Level 1

You can use the Theme Extend feature to handle this in a nice DRY way ..

(laracasts.com wont let me post link) tailwindcss.com/docs/theme#extending-the-default-theme

theme: {
    extend {
        colors: {
            'brand-900': '#670000',
        },
   }
}

Please or to participate in this conversation.