[v4] Tailwind styles are not applied to angular components #13154

johanndev · 2024-03-08T16:24:35Z

johanndev
Mar 8, 2024

Hi!

I wanted to give the new alpha of v4 a try in an angular app. Unfortunately, I'm unable to get it working.

Steps to reproduce:

I tried the steps outlined in the v4 Alpha blog post: https://tailwindcss.com/blog/tailwindcss-v4-alpha#using-post-css

bun create @angular@latest ng-tailwind-v4 --style css --ssr false
cd ng-tailwind-v4
bun install tailwindcss@next @tailwindcss/postcss@next

Create postcss.config.js:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

Add @import "tailwindcss"; to src/styles.css

Replace contents of src/app/app.component.html with:

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Serve the app via bun start, result in browser:

Notice that none of the TW classes (bold, underline) are applied to the h1. The styles on the h1 all come from preflight.css

The integration in the angular build system seems to work - styles.css is successfully created but does not contained styles for the applied classes:

Generated styles.css

@layer theme, base, components, utilities; /* node_modules/tailwindcss/theme.css */
@layer theme {
    @theme {
        --default-transition-duration: 150ms;
        --default-transition-timing-function: var(--transition-timing-function-in-out);
        --default-font-family: var(--font-family-sans);
        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
        --default-mono-font-family: var(--font-family-mono);
        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
        --breakpoint-sm: 640px;
        --breakpoint-md: 768px;
        --breakpoint-lg: 1024px;
        --breakpoint-xl: 1280px;
        --breakpoint-2xl: 1536px;
        --color-black: #000;
        --color-white: #fff;
        --color-slate-50: #f8fafc;
        --color-slate-100: #f1f5f9;
        --color-slate-200: #e2e8f0;
        --color-slate-300: #cbd5e1;
        --color-slate-400: #94a3b8;
        --color-slate-500: #64748b;
        --color-slate-600: #475569;
        --color-slate-700: #334155;
        --color-slate-800: #1e293b;
        --color-slate-900: #0f172a;
        --color-slate-950: #020617;
        --color-gray-50: #f9fafb;
        --color-gray-100: #f3f4f6;
        --color-gray-200: #e5e7eb;
        --color-gray-300: #d1d5db;
        --color-gray-400: #9ca3af;
        --color-gray-500: #6b7280;
        --color-gray-600: #4b5563;
        --color-gray-700: #374151;
        --color-gray-800: #1f2937;
        --color-gray-900: #111827;
        --color-gray-950: #030712;
        --color-zinc-50: #fafafa;
        --color-zinc-100: #f4f4f5;
        --color-zinc-200: #e4e4e7;
        --color-zinc-300: #d4d4d8;
        --color-zinc-400: #a1a1aa;
        --color-zinc-500: #71717a;
        --color-zinc-600: #52525b;
        --color-zinc-700: #3f3f46;
        --color-zinc-800: #27272a;
        --color-zinc-900: #18181b;
        --color-zinc-950: #09090b;
        --color-neutral-50: #fafafa;
        --color-neutral-100: #f5f5f5;
        --color-neutral-200: #e5e5e5;
        --color-neutral-300: #d4d4d4;
        --color-neutral-400: #a3a3a3;
        --color-neutral-500: #737373;
        --color-neutral-600: #525252;
        --color-neutral-700: #404040;
        --color-neutral-800: #262626;
        --color-neutral-900: #171717;
        --color-neutral-950: #0a0a0a;
        --color-stone-50: #fafaf9;
        --color-stone-100: #f5f5f4;
        --color-stone-200: #e7e5e4;
        --color-stone-300: #d6d3d1;
        --color-stone-400: #a8a29e;
        --color-stone-500: #78716c;
        --color-stone-600: #57534e;
        --color-stone-700: #44403c;
        --color-stone-800: #292524;
        --color-stone-900: #1c1917;
        --color-stone-950: #0c0a09;
        --color-red-50: #fef2f2;
        --color-red-100: #fee2e2;
        --color-red-200: #fecaca;
        --color-red-300: #fca5a5;
        --color-red-400: #f87171;
        --color-red-500: #ef4444;
        --color-red-600: #dc2626;
        --color-red-700: #b91c1c;
        --color-red-800: #991b1b;
        --color-red-900: #7f1d1d;
        --color-red-950: #450a0a;
        --color-orange-50: #fff7ed;
        --color-orange-100: #ffedd5;
        --color-orange-200: #fed7aa;
        --color-orange-300: #fdba74;
        --color-orange-400: #fb923c;
        --color-orange-500: #f97316;
        --color-orange-600: #ea580c;
        --color-orange-700: #c2410c;
        --color-orange-800: #9a3412;
        --color-orange-900: #7c2d12;
        --color-orange-950: #431407;
        --color-amber-50: #fffbeb;
        --color-amber-100: #fef3c7;
        --color-amber-200: #fde68a;
        --color-amber-300: #fcd34d;
        --color-amber-400: #fbbf24;
        --color-amber-500: #f59e0b;
        --color-amber-600: #d97706;
        --color-amber-700: #b45309;
        --color-amber-800: #92400e;
        --color-amber-900: #78350f;
        --color-amber-950: #451a03;
        --color-yellow-50: #fefce8;
        --color-yellow-100: #fef9c3;
        --color-yellow-200: #fef08a;
        --color-yellow-300: #fde047;
        --color-yellow-400: #facc15;
        --color-yellow-500: #eab308;
        --color-yellow-600: #ca8a04;
        --color-yellow-700: #a16207;
        --color-yellow-800: #854d0e;
        --color-yellow-900: #713f12;
        --color-yellow-950: #422006;
        --color-lime-50: #f7fee7;
        --color-lime-100: #ecfccb;
        --color-lime-200: #d9f99d;
        --color-lime-300: #bef264;
        --color-lime-400: #a3e635;
        --color-lime-500: #84cc16;
        --color-lime-600: #65a30d;
        --color-lime-700: #4d7c0f;
        --color-lime-800: #3f6212;
        --color-lime-900: #365314;
        --color-lime-950: #1a2e05;
        --color-green-50: #f0fdf4;
        --color-green-100: #dcfce7;
        --color-green-200: #bbf7d0;
        --color-green-300: #86efac;
        --color-green-400: #4ade80;
        --color-green-500: #22c55e;
        --color-green-600: #16a34a;
        --color-green-700: #15803d;
        --color-green-800: #166534;
        --color-green-900: #14532d;
        --color-green-950: #052e16;
        --color-emerald-50: #ecfdf5;
        --color-emerald-100: #d1fae5;
        --color-emerald-200: #a7f3d0;
        --color-emerald-300: #6ee7b7;
        --color-emerald-400: #34d399;
        --color-emerald-500: #10b981;
        --color-emerald-600: #059669;
        --color-emerald-700: #047857;
        --color-emerald-800: #065f46;
        --color-emerald-900: #064e3b;
        --color-emerald-950: #022c22;
        --color-teal-50: #f0fdfa;
        --color-teal-100: #ccfbf1;
        --color-teal-200: #99f6e4;
        --color-teal-300: #5eead4;
        --color-teal-400: #2dd4bf;
        --color-teal-500: #14b8a6;
        --color-teal-600: #0d9488;
        --color-teal-700: #0f766e;
        --color-teal-800: #115e59;
        --color-teal-900: #134e4a;
        --color-teal-950: #042f2e;
        --color-cyan-50: #ecfeff;
        --color-cyan-100: #cffafe;
        --color-cyan-200: #a5f3fc;
        --color-cyan-300: #67e8f9;
        --color-cyan-400: #22d3ee;
        --color-cyan-500: #06b6d4;
        --color-cyan-600: #0891b2;
        --color-cyan-700: #0e7490;
        --color-cyan-800: #155e75;
        --color-cyan-900: #164e63;
        --color-cyan-950: #083344;
        --color-sky-50: #f0f9ff;
        --color-sky-100: #e0f2fe;
        --color-sky-200: #bae6fd;
        --color-sky-300: #7dd3fc;
        --color-sky-400: #38bdf8;
        --color-sky-500: #0ea5e9;
        --color-sky-600: #0284c7;
        --color-sky-700: #0369a1;
        --color-sky-800: #075985;
        --color-sky-900: #0c4a6e;
        --color-sky-950: #082f49;
        --color-blue-50: #eff6ff;
        --color-blue-100: #dbeafe;
        --color-blue-200: #bfdbfe;
        --color-blue-300: #93c5fd;
        --color-blue-400: #60a5fa;
        --color-blue-500: #3b82f6;
        --color-blue-600: #2563eb;
        --color-blue-700: #1d4ed8;
        --color-blue-800: #1e40af;
        --color-blue-900: #1e3a8a;
        --color-blue-950: #172554;
        --color-indigo-50: #eef2ff;
        --color-indigo-100: #e0e7ff;
        --color-indigo-200: #c7d2fe;
        --color-indigo-300: #a5b4fc;
        --color-indigo-400: #818cf8;
        --color-indigo-500: #6366f1;
        --color-indigo-600: #4f46e5;
        --color-indigo-700: #4338ca;
        --color-indigo-800: #3730a3;
        --color-indigo-900: #312e81;
        --color-indigo-950: #1e1b4b;
        --color-violet-50: #f5f3ff;
        --color-violet-100: #ede9fe;
        --color-violet-200: #ddd6fe;
        --color-violet-300: #c4b5fd;
        --color-violet-400: #a78bfa;
        --color-violet-500: #8b5cf6;
        --color-violet-600: #7c3aed;
        --color-violet-700: #6d28d9;
        --color-violet-800: #5b21b6;
        --color-violet-900: #4c1d95;
        --color-violet-950: #2e1065;
        --color-purple-50: #faf5ff;
        --color-purple-100: #f3e8ff;
        --color-purple-200: #e9d5ff;
        --color-purple-300: #d8b4fe;
        --color-purple-400: #c084fc;
        --color-purple-500: #a855f7;
        --color-purple-600: #9333ea;
        --color-purple-700: #7e22ce;
        --color-purple-800: #6b21a8;
        --color-purple-900: #581c87;
        --color-purple-950: #3b0764;
        --color-fuchsia-50: #fdf4ff;
        --color-fuchsia-100: #fae8ff;
        --color-fuchsia-200: #f5d0fe;
        --color-fuchsia-300: #f0abfc;
        --color-fuchsia-400: #e879f9;
        --color-fuchsia-500: #d946ef;
        --color-fuchsia-600: #c026d3;
        --color-fuchsia-700: #a21caf;
        --color-fuchsia-800: #86198f;
        --color-fuchsia-900: #701a75;
        --color-fuchsia-950: #4a044e;
        --color-pink-50: #fdf2f8;
        --color-pink-100: #fce7f3;
        --color-pink-200: #fbcfe8;
        --color-pink-300: #f9a8d4;
        --color-pink-400: #f472b6;
        --color-pink-500: #ec4899;
        --color-pink-600: #db2777;
        --color-pink-700: #be185d;
        --color-pink-800: #9d174d;
        --color-pink-900: #831843;
        --color-pink-950: #500724;
        --color-rose-50: #fff1f2;
        --color-rose-100: #ffe4e6;
        --color-rose-200: #fecdd3;
        --color-rose-300: #fda4af;
        --color-rose-400: #fb7185;
        --color-rose-500: #f43f5e;
        --color-rose-600: #e11d48;
        --color-rose-700: #be123c;
        --color-rose-800: #9f1239;
        --color-rose-900: #881337;
        --color-rose-950: #4c0519;
        --animate-spin: spin 1s linear infinite;
        --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
        --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        --animate-bounce: bounce 1s infinite;
        --blur: 8px;
        --blur-sm: 4px;
        --blur-md: 12px;
        --blur-lg: 16px;
        --blur-xl: 24px;
        --blur-2xl: 40px;
        --blur-3xl: 64px;
        --radius-none: 0px;
        --radius-full: 9999px;
        --radius-sm: 0.125rem;
        --radius: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --shadow-xs: 0 1px rgb(0 0 0 / 0.05);
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
        --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
        --inset-shadow-xs: inset 0 1px rgb(0 0 0 / 0.05);
        --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
        --inset-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
        --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
        --drop-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.05);
        --drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06);
        --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
        --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
        --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
        --spacing-px: 1px;
        --spacing-0: 0px;
        --spacing-0_5: 0.125rem;
        --spacing-1: 0.25rem;
        --spacing-1_5: 0.375rem;
        --spacing-2: 0.5rem;
        --spacing-2_5: 0.625rem;
        --spacing-3: 0.75rem;
        --spacing-3_5: 0.875rem;
        --spacing-4: 1rem;
        --spacing-5: 1.25rem;
        --spacing-6: 1.5rem;
        --spacing-7: 1.75rem;
        --spacing-8: 2rem;
        --spacing-9: 2.25rem;
        --spacing-10: 2.5rem;
        --spacing-11: 2.75rem;
        --spacing-12: 3rem;
        --spacing-14: 3.5rem;
        --spacing-16: 4rem;
        --spacing-20: 5rem;
        --spacing-24: 6rem;
        --spacing-28: 7rem;
        --spacing-32: 8rem;
        --spacing-36: 9rem;
        --spacing-40: 10rem;
        --spacing-44: 11rem;
        --spacing-48: 12rem;
        --spacing-52: 13rem;
        --spacing-56: 14rem;
        --spacing-60: 15rem;
        --spacing-64: 16rem;
        --spacing-72: 18rem;
        --spacing-80: 20rem;
        --spacing-96: 24rem;
        --width-3xs: 16rem;
        --width-2xs: 18rem;
        --width-xs: 20rem;
        --width-sm: 24rem;
        --width-md: 28rem;
        --width-lg: 32rem;
        --width-xl: 36rem;
        --width-2xl: 42rem;
        --width-3xl: 48rem;
        --width-4xl: 56rem;
        --width-5xl: 64rem;
        --width-6xl: 72rem;
        --width-7xl: 80rem;
        --width-prose: 65ch;
        --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --font-size-xs: 0.75rem;
        --font-size-xs--line-height: 1rem;
        --font-size-sm: 0.875rem;
        --font-size-sm--line-height: 1.25rem;
        --font-size-base: 1rem;
        --font-size-base--line-height: 1.5rem;
        --font-size-lg: 1.125rem;
        --font-size-lg--line-height: 1.75rem;
        --font-size-xl: 1.25rem;
        --font-size-xl--line-height: 1.75rem;
        --font-size-2xl: 1.5rem;
        --font-size-2xl--line-height: 2rem;
        --font-size-3xl: 1.875rem;
        --font-size-3xl--line-height: 2.25rem;
        --font-size-4xl: 2.25rem;
        --font-size-4xl--line-height: 2.5rem;
        --font-size-5xl: 3rem;
        --font-size-5xl--line-height: 1;
        --font-size-6xl: 3.75rem;
        --font-size-6xl--line-height: 1;
        --font-size-7xl: 4.5rem;
        --font-size-7xl--line-height: 1;
        --font-size-8xl: 6rem;
        --font-size-8xl--line-height: 1;
        --font-size-9xl: 8rem;
        --font-size-9xl--line-height: 1;
        --letter-spacing-tighter: -0.05em;
        --letter-spacing-tight: -0.025em;
        --letter-spacing-normal: 0em;
        --letter-spacing-wide: 0.025em;
        --letter-spacing-wider: 0.05em;
        --letter-spacing-widest: 0.1em;
        --line-height-none: 1;
        --line-height-tight: 1.25;
        --line-height-snug: 1.375;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.625;
        --line-height-loose: 2;
        --line-height-3: 0.75rem;
        --line-height-4: 1rem;
        --line-height-5: 1.25rem;
        --line-height-6: 1.5rem;
        --line-height-7: 1.75rem;
        --line-height-8: 2rem;
        --line-height-9: 2.25rem;
        --line-height-10: 2.5rem;
        --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --transition-timing-function-linear: linear;
        --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
        --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
        --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes ping {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        @keyframes pulse {
            50% {
                opacity: 0.5;
            }
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(-25%);
                animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            }

            50% {
                transform: none;
                animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            }
        }
    }
}

/* node_modules/tailwindcss/preflight.css */
@layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html, : host {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }

    body {
        line-height: inherit;
    }

    hr {
        height: 0;
        color: inherit;
        border: 0 solid;
        border-top-width: 1px;
    }

    abbr: where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit;
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }

    b, strong {
        font-weight: bolder;
    }

    code, kbd, samp, pre {
        font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em;
    }

    small {
        font-size: 80%;
    }

    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }

    button, input, optgroup, select, textarea, : :file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        color: inherit;
        border: 1px solid;
        background: transparent;
        padding: 0;
    }

    button, input: where([type=button], [type=reset], [type=submit]), ::file-selector-button {
        appearance: button;
        border: 0;
    }

    :-moz-focusring {
        outline: auto;
    }

    :-moz-ui-invalid {
        box-shadow: none;
    }

    progress {
        vertical-align: baseline;
    }

    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
        height: auto;
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    summary {
        display: list-item;
    }

    fieldset {
        border: 0;
        padding: 0;
    }

    legend {
        padding: 0;
    }

    ol, ul, menu {
        list-style: none;
        padding: 0;
    }

    dialog {
        padding: 0;
    }

    textarea {
        resize: vertical;
    }

    ::placeholder {
        opacity: 1;
        color: color-mix(in srgb, currentColor 50%, transparent);
    }

    :disabled {
        cursor: default;
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        display: block;
        vertical-align: middle;
    }

    img, video {
        max-width: 100%;
        height: auto;
    }

    [hidden] {
        display: none !important;
    }
}

/* node_modules/tailwindcss/utilities.css */
@layer utilities {
    @tailwind utilities; }

/* node_modules/tailwindcss/index.css */
/* src/styles.css */
/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */

Does anybody have an idea what I could try next?

Thanks!

Answered by inorganik

May 3, 2024

@johanndev you had the postcss config file named wrong - it has to follow this format

View full answer

dev-sampsonorson · 2024-03-14T13:19:09Z

dev-sampsonorson
Mar 14, 2024

What version of Angular are you using?

3 replies

johanndev Mar 14, 2024
Author

What version of Angular are you using?

At the time of writing, it was 17.3.0-rc.0. I haven't tried the latest stable 17.3.0.

dev-sampsonorson Mar 15, 2024

You can use AnalogJS which is an Angular meta-framework. Check out my LinkedIn post; https://www.linkedin.com/feed/update/urn:li:activity:7174371265611259904/

johanndev Mar 18, 2024
Author

Thanks!

I'd really like to try the alpha with a plain angular application.

inorganik · 2024-05-01T21:56:04Z

inorganik
May 1, 2024

The angular guide shows that you need to configure your template paths: https://tailwindcss.com/docs/guides/angular

7 replies

johanndev May 2, 2024
Author

@inorganik Can you share the specific steps you took to get it working? I just tried the latest alpha (4.0.0-alpha.14) and got the same results as the last time I tried it.

inorganik May 2, 2024

I followed the instructions in the v4 blog post, which pretty much amounts to installing tailwind and the CLI, importing tailwind in a css file and then invoking the CLI.

Here is a repo of a test angular 16 app where I have it working. I added an npm script command "tailwind" which invokes the CLI. All that does is spit out the compiled css into another file called tailwind.css. You can see that it's working by adding a tailwind class in one of the component templates, and then run the command and you'll see it adds the class to tailwind.css. The cool thing is that there is no tailwind config, but it still works.

https://github.com/jamie-perkins-sp/angular16-test

johanndev May 2, 2024
Author

Directly invoking the Tailwind CLI works fine, what I want to accomplish is to have tailwind v4 integrated into the angular build process; i.e. building the project with ng build or serving with ng serve applies the TW styles to my components.

jamie-perkins-sp May 2, 2024

Looks like the angular builder actually looks for a tailwind config file, and if it finds it, runs tailwind. I tried adding a config file with v4 and I get an error, presumably because the CLI isn't compatible. Reference: #10295 (comment)

inorganik May 2, 2024

whoops commented with my work account. I'm thinking there needs to be a webpack plugin that is compatible with the latest CLI. Otherwise you can simply use v3 and let Angular build it for you

inorganik · 2024-05-02T23:41:41Z

inorganik
May 2, 2024

I opened an issue in the Angular CLI repo because Angular currently has a peer dependency on tailwind v2-3 and there's seemingly no way to integrate v4 angular/angular-cli#27585

0 replies

inorganik · 2024-05-03T15:44:23Z

inorganik
May 3, 2024

The PostCSS method works in Angular 17, but old version peer dependencies are a PITA. Instructions:

npm install -D tailwindcss@next @tailwindcss/postcss@next --force
Add postcss.config.json file in the root:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Now tailwind styles build on every change. 🎉

2 replies

inorganik May 3, 2024

@johanndev you had the postcss config file named wrong - it has to follow this format

Answer selected by johanndev

johanndev May 6, 2024
Author

Thank you, it works as expected!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v4] Tailwind styles are not applied to angular components #13154

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 12 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

[v4] Tailwind styles are not applied to angular components #13154

Replies: 4 comments · 12 replies

johanndev Mar 14, 2024 Author

johanndev Mar 18, 2024 Author

johanndev May 2, 2024 Author

johanndev May 2, 2024 Author

johanndev May 6, 2024 Author

Replies: 4 comments 12 replies

johanndev Mar 14, 2024
Author

johanndev Mar 18, 2024
Author

johanndev May 2, 2024
Author

johanndev May 2, 2024
Author

johanndev May 6, 2024
Author