WARN [vite:css] start value has mixed support, consider using flex-start instead

[madebyfabian]

Hi there! Thanks for providing this tool! After installing it with vite, I get the following error:

[6:38:48 PM]  WARN  [vite:css] start value has mixed support, consider using flex-start instead
61 |    transform: translate(-50%, -50%);
62 |    display: flex;
63 |    justify-content: start;
   |     ^
64 |    overflow: hidden;
65 |    align-items: center;

What I am wondering is, that I don't even wrote this anywhere. Maybe the warning is about the generated CSS?

My config:

// vite
tailwindcssExtend({
  pattern: '**/assets/css/**',
  output: 'tailwind.plugin.gen.ts',
  type: 'module',
}),

/* assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    *:focus {
        @apply outline-brand-100 outline-2 outline-offset-4;
    }

    html {
        @apply bg-gray-0 text-gray-700;
        @apply text-[14px] lg:text-[16px];

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    }

    body {
        @apply text-body-100 underline-offset-2 overflow-y-scroll;
    }

    pre {
        font-size: 12px;
        @apply p-4 bg-gray-100 leading-tight overflow-x-scroll;
    }
}

/* assets/css/plugin.css */
/* Later gets transformed into tailwind js plugin by tailwindcss-extend */
@layer utilities {
    .PageGrid {
        @apply grid grid-cols-4 lg:grid-cols-12 gap-x-4 gap-y-8;
    }

    .RichtextBlock {
        @apply my-7 first:mt-0 last:mb-0;
    }

    .text-body-50 {
        @apply font-label;
        font-size: 1rem;
        line-height: 1.4rem;
        @screen lg {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
    }

    .text-body-100 {
        @apply font-body;
        font-size: 1.375rem;
        line-height: 1.875rem;
    }

    .text-heading-100 {
        @apply font-display uppercase text-brand-100;
        font-size: 1.2rem;
        line-height: 1.5rem;
        @screen lg {
            font-size: 1rem;
            line-height: 1.25rem;
        }
    }

    .text-heading-200 {
        @apply font-display font-extrabold uppercase text-brand-100;
        font-size: 1.375rem;
        line-height: 1.875rem;
        letter-spacing: -0.03em;
    }

    .text-heading-300 {
        @apply font-body text-gray-600;
        font-size: 1.375rem;
        line-height: 1.875rem;
    }

    .text-heading-400 {
        @apply font-body text-gray-600;
        font-size: 2.25rem;
        line-height: 2.25rem;
    }

    .text-heading-450 {
        @apply font-display uppercase font-light;
        font-size: 1.75rem;
        line-height: 2rem;
        letter-spacing: -0.03em;
    }

    .text-heading-500 {
        @apply font-display uppercase font-light;
        font-size: 2.5rem;
        line-height: 2.5rem;
        letter-spacing: -0.05em;
    }

    .text-heading-600 {
        @apply font-display font-extralight uppercase text-brand-100;
        font-size: 2.75rem;
        line-height: 2.75rem;
        letter-spacing: -0.05em;
        @screen lg {
            font-size: 3.75rem;
            line-height: 3.75rem;
        }
    }
}

@layer components {
    .UILink {
        @apply block hover:text-brand-100;
    }

    .UILink-50 {
        @apply block text-brand-100 pl-3 text-body-50 hover:text-gray-600;

        &::before {
            content: '» ';
        }
    }
} 

[david-plugge]

Glad you like it:)

I haven´t seen that issue, but i assume it´s because you include the file with your tailwind entrypoint

/* assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

in the pattern. Create a seperate folder like assets/css/tailwind and put all files tailwindcss-extend should process in there. The actual css file wont be included in your build but the generated js/ts file will be used instead.

[david-plugge]

As a side note, you should use the path module to define the pattern, otherwise the plugin includes all files on your file system that match the pattern. I need to update the docs and example.

// vite.config.ts
import path from 'node:path'

tailwindcssExtend({
  pattern: path.resolve('assets/css/**'),
  output: 'tailwind.plugin.gen.ts',
  type: 'module',
}),

[madebyfabian]

@david-plugge Thanks! I added the path.resolve (path.resolve('assets/css/plugins/**')) and moved the css file into a seperate subfolder (assets/css/plugins/plugin.css).

I just found out where the console warning is coming from. I am using Vite with Nuxt and the Nuxt Devtools Styling contains this justify-content: start CSS. Closing this here.

Thanks again!

[madebyfabian]

For reference https://github.com/nuxt/devtools/issues/368