未正确生成顺风 3 调色板

Question

I have worked on this for about 3 hours and cannot get a heads up on it. I am using laravel 9. and laravel mix. I have followed the instructions fo upgrade tailwind shown on the TailWind Website . Yet the color pallete is not installing completely. For example, after compiling and creating css file in the public/css/app.css, there is only one entry for the 'bg-sky' color in the app.css:

.bg-sky-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
}

There should be entries for 50,and 100 thru 900, but only 400 is offered.

btw, the gray color has all the proper gradients in the app.css, ranging from 50, 100 thru 900.

My tailwind.config.js file is as follows:

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

module.exports = {
  content: [
      './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
      './storage/framework/views/*.php',
      './resources/views/**/*.blade.php',
  ],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {
        colors: {
            gray: colors.neutral,
        },
        fontFamily: {
            /*sans: ['Nunito', ...defaultTheme.fontFamily.sans],*/
        },
        maxWidth: {
            '8xl': '88rem',
            '9xl': '96rem',
            '10xl': '104rem'
        }
    },
      fontSize: {
          'xss': '.70rem',
          'xs': '.75rem',
          'sm': '.875rem',
          'tiny': '.875rem',
          'base': '1rem',
          'lg': '1.125rem',
          'xl': '1.25rem',
          '2xl': '1.5rem',
          '3xl': '1.875rem',
          '4xl': '2.25rem',
          '5xl': '3rem',
          '6xl': '4rem',
          '7xl': '5rem',
      }
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

The following is stumping me. If I change the color gray in the tailwind.config.js like so:

theme: {
    extend: {
        colors: {
            gray: colors.sky,
        },

Notice in the first example the setting was gray: colors.neutral.

If I go back into my generated app.css after runing laravel mix's

sail npm run dev

I still find that the color gray has been generated as expected, and has all the gradients (50, 100 - 900). And gray is rendering as the sky color should be rendering

In other words, I can get the palette if I re-define the color gray to be colors.sky in the tailwind.config.js file.

HOWEVER, if i try to create a color this way:

extend: {
        colors: {
            dogcat: colors.sky,
        },

there is no color 'dogcat' in the generated app.css.

What Gives, If anyone knows. would appreciate you chiming in.

Oh, and by the way, I tried adding in the colors this way into the tailwind.config.js:

   theme: {
    extend: {
        colors: {
            gray: colors.neutral,
                slate: {
    50: '#f8fafc',
    100: '#f1f5f9',
    200: '#e2e8f0',
    300: '#cbd5e1',
    400: '#94a3b8',
    500: '#64748b',
    600: '#475569',
    700: '#334155',
    800: '#1e293b',
    900: '#0f172a',
},
gray: {
    50: '#f9fafb',
    100: '#f3f4f6',
    200: '#e5e7eb',
    300: '#d1d5db',
    400: '#9ca3af',
    500: '#6b7280',
    600: '#4b5563',
    700: '#374151',
    800: '#1f2937',
    900: '#111827',
},
zinc: {
    50: '#fafafa',
    100: '#f4f4f5',
    200: '#e4e4e7',
    300: '#d4d4d8',
    400: '#a1a1aa',
    500: '#71717a',
    600: '#52525b',
    700: '#3f3f46',
    800: '#27272a',
    900: '#18181b',
},
neutral: {
    50: '#fafafa',
    100: '#f5f5f5',
    200: '#e5e5e5',
    300: '#d4d4d4',
    400: '#a3a3a3',
    500: '#737373',
    600: '#525252',
    700: '#404040',
    800: '#262626',
    900: '#171717',
},
stone: {
    50: '#fafaf9',
    100: '#f5f5f4',
    200: '#e7e5e4',
    300: '#d6d3d1',
    400: '#a8a29e',
    500: '#78716c',
    600: '#57534e',
    700: '#44403c',
    800: '#292524',
    900: '#1c1917',
},
red: {
    50: '#fef2f2',
    100: '#fee2e2',
    200: '#fecaca',
    300: '#fca5a5',
    400: '#f87171',
    500: '#ef4444',
    600: '#dc2626',
    700: '#b91c1c',
    800: '#991b1b',
    900: '#7f1d1d',
},
orange: {
    50: '#fff7ed',
    100: '#ffedd5',
    200: '#fed7aa',
    300: '#fdba74',
    400: '#fb923c',
    500: '#f97316',
    600: '#ea580c',
    700: '#c2410c',
    800: '#9a3412',
    900: '#7c2d12',
},
amber: {
    50: '#fffbeb',
    100: '#fef3c7',
    200: '#fde68a',
    300: '#fcd34d',
    400: '#fbbf24',
    500: '#f59e0b',
    600: '#d97706',
    700: '#b45309',
    800: '#92400e',
    900: '#78350f',
},
yellow: {
    50: '#fefce8',
    100: '#fef9c3',
    200: '#fef08a',
    300: '#fde047',
    400: '#facc15',
    500: '#eab308',
    600: '#ca8a04',
    700: '#a16207',
    800: '#854d0e',
    900: '#713f12',
},
lime: {
    50: '#f7fee7',
    100: '#ecfccb',
    200: '#d9f99d',
    300: '#bef264',
    400: '#a3e635',
    500: '#84cc16',
    600: '#65a30d',
    700: '#4d7c0f',
    800: '#3f6212',
    900: '#365314',
},
green: {
    50: '#f0fdf4',
    100: '#dcfce7',
    200: '#bbf7d0',
    300: '#86efac',
    400: '#4ade80',
    500: '#22c55e',
    600: '#16a34a',
    700: '#15803d',
    800: '#166534',
    900: '#14532d',
},
emerald: {
    50: '#ecfdf5',
    100: '#d1fae5',
    200: '#a7f3d0',
    300: '#6ee7b7',
    400: '#34d399',
    500: '#10b981',
    600: '#059669',
    700: '#047857',
    800: '#065f46',
    900: '#064e3b',
},
teal: {
    50: '#f0fdfa',
    100: '#ccfbf1',
    200: '#99f6e4',
    300: '#5eead4',
    400: '#2dd4bf',
    500: '#14b8a6',
    600: '#0d9488',
    700: '#0f766e',
    800: '#115e59',
    900: '#134e4a',
},
cyan: {
    50: '#ecfeff',
    100: '#cffafe',
    200: '#a5f3fc',
    300: '#67e8f9',
    400: '#22d3ee',
    500: '#06b6d4',
    600: '#0891b2',
    700: '#0e7490',
    800: '#155e75',
    900: '#164e63',
},
sky: {
    50: '#f0f9ff',
    100: '#e0f2fe',
    200: '#bae6fd',
    300: '#7dd3fc',
    400: '#38bdf8',
    500: '#0ea5e9',
    600: '#0284c7',
    700: '#0369a1',
    800: '#075985',
    900: '#0c4a6e',
},
blue: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
},
indigo: {
    50: '#eef2ff',
    100: '#e0e7ff',
    200: '#c7d2fe',
    300: '#a5b4fc',
    400: '#818cf8',
    500: '#6366f1',
    600: '#4f46e5',
    700: '#4338ca',
    800: '#3730a3',
    900: '#312e81',
},
violet: {
    50: '#f5f3ff',
    100: '#ede9fe',
    200: '#ddd6fe',
    300: '#c4b5fd',
    400: '#a78bfa',
    500: '#8b5cf6',
    600: '#7c3aed',
    700: '#6d28d9',
    800: '#5b21b6',
    900: '#4c1d95',
},
purple: {
    50: '#faf5ff',
    100: '#f3e8ff',
    200: '#e9d5ff',
    300: '#d8b4fe',
    400: '#c084fc',
    500: '#a855f7',
    600: '#9333ea',
    700: '#7e22ce',
    800: '#6b21a8',
    900: '#581c87',
},
fuchsia: {
    50: '#fdf4ff',
    100: '#fae8ff',
    200: '#f5d0fe',
    300: '#f0abfc',
    400: '#e879f9',
    500: '#d946ef',
    600: '#c026d3',
    700: '#a21caf',
    800: '#86198f',
    900: '#701a75',
},
pink: {
    50: '#fdf2f8',
    100: '#fce7f3',
    200: '#fbcfe8',
    300: '#f9a8d4',
    400: '#f472b6',
    500: '#ec4899',
    600: '#db2777',
    700: '#be185d',
    800: '#9d174d',
    900: '#831843',
},
rose: {
    50: '#fff1f2',
    100: '#ffe4e6',
    200: '#fecdd3',
    300: '#fda4af',
    400: '#fb7185',
    500: '#f43f5e',
    600: '#e11d48',
    700: '#be123c',
    800: '#9f1239',
    900: '#881337',
}

        },

I added all the colors in the above way. I got the color codes from the tailwind website. that didn't seem to work.

I also took the color section completely out of the tailwind.config.js as well:

 theme: {
    extend: {

        fontFamily: {
            /*sans: ['Nunito', ...defaultTheme.fontFamily.sans],*/
        },
        maxWidth: {
            '8xl': '88rem',
            '9xl': '96rem',
            '10xl': '104rem'
        }
    },

Still no success. However, bg-sky- shows up twice in the generated app.css file:

.bg-sky-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(125 211 252 / var(--tw-bg-opacity));
}
.bg-sky-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
}

In fact the term '-sky-' appears only twice in the entire app.css file.

It seems that the only color that has been generated properly is gray, as it shows up 61 times in the generated css file. here ae the numbers

-blue-          => 15 times
-indigo-        => 31 times
-slate-         => 0 times
-gray-         => 61 times
-rose-         => 1 time
-zinc-         => 0 times
-stone-       => 0 times
-red-          => 15 times
-violet-       => 0 times
-pink-        => 6 times
-lime-        => 0 times
-green-     => 9 times
-emerald-  => 0 times
-teal-        => 0 times
-cyan-       => 0 times
-sky-       => 2 times
-neutral-   => 0 times
-orange-   => 0 times
-purple-   => 4 times
-fuchsia-   => 0 times
-yellow-   => 3 times
-amber-    => 0 times

What gives!

Answer 1

well, i think Snapey's comment triggered the answer. using laravel mix, i didn't realize that it would not load the entire tailwind framework. I thought it would wile I was using npm run dev. But, I have to make reference to the attreibute setting before laravel mix will place it in the public css file.

So, I will run npm run watch so it will auto generate the css file as I add the attribute settings.

If someone knows how to install the entire tailwind framework under laravel mix while in development, would appreciate the comment.