How to use Tailwind 4?

[mahono]

Hi,

I am new to TailwindCSS and this bundle. I waited for the version 4 support and tried to set it up.

I checked the docs on the Symfony website.

When I install the bundle, a config/symfonycasts_tailwind.yaml is not created and version 3 is downloaded on tailwind:init and the tailwind.config.js is created and the directives are added to styles/app.css

I think this is confusing if a developer wants to start a fresh Tailwind 4 project.

Now I created the config file and changed the version to 'v4.0.9'. But how do I update tailwind now?
When I execute tailwind:init again, it does not download this version.

Do I need to use npm to install the version I want?

I am a little bit lost. I created a fresh Symfony project.

Any help is appreciated. :o)

[mahono]

Maybe the tailwind:init command should be extended to a required second argument to configure the TailwindCSS version number and then do the things needed for the (major) version.

[kbond]

Hey @mahono,

To confirm, was tailwind-bundle 0.8.0 installed? Did you see any notes about a flex recipe being installed - this is what adds the config? We only just merged the recipe so you may have installed before.

Also, after you set the config, did tailwind:init add some code to your app.css?

The actual download only happens when you run tailwind:build. After you run that, you should see the binary in var/tailwind.

Maybe the tailwind:init command should be extended to a required second argument to configure the TailwindCSS version number and then do the things needed for the (major) version.

Yeah, that feels like a good idea. In the recipe, we can only choose one version and I landed on 3.4.17.

[mahono]

Ah. After clearing the symfony cache, the new version was detected and downloaded on tailwind:build

Maybe in the docs, add a note about how to use / switch the setup to Tailwind 4?

[mahono]

Yes, I created everything from scratch: New Symfony 7.2 project, installed tailwind-bundle 0.8 and then I tried tailwind:init.

[mahono]

Like I said, it's a little bit confusing that files are created that are not needed when using Tailwind 4.

I will play a little bit with it in the next days/weeks. Thanks!

[kbond]

Thanks for reporting this. Sounds like there's some things we need to smooth out.

I like your idea of choosing a version for tailwind:init. Could be interactive: "Which version of Tailwind CSS would your like to use?" Then list the latest 3.x and latest 4.x.

[kbond]

When I install the bundle, a config/symfonycasts_tailwind.yaml is not created

FYI - we had a hiccup after merging the flex recipe. The config wasn't built correctly. This has now been fixed.

[weaverryan]

The tailwind:init command still needs work for v4 #95, but for v4, here's what you need:

A) Delete tailwind.config.js (content is now automatic)
B) In app.css:

--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

C) Create or update config/packages/symfonycasts_tailwind.yaml:

symfonycasts_tailwind:
    # Specify the EXACT version of Tailwind CSS you want to use
    binary_version: 'v4.0.10'

D) Clear cache to make sure the new binary is downloaded:

php bin/console cache:clear

E) restart tailwind:build

Hope that helps!

[dsands]

The tailwind:init command still needs work for v4 #95, but for v4, here's what you need:

A) Delete tailwind.config.js (content is now automatic) B) In app.css:

--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
C) Create or update config/packages/symfonycasts_tailwind.yaml:

symfonycasts_tailwind:
# Specify the EXACT version of Tailwind CSS you want to use
binary_version: 'v4.0.10'
D) Clear cache to make sure the new binary is downloaded:

php bin/console cache:clear

E) restart tailwind:build

Hope that helps!

I may have a more advanced case, not sure. I'm struggling with figuring out how tailwind now handles the theme extends and plugins... the upgrade tool seems totally useless. My tailwind.config.js:

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

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig",
            "./assets/**/*.js",
        "./templates/**/*.html.twig",
        "./src/Twig/Components/**/*.php"
    ],
    darkMode: 'class',
    theme: {
        extend: {
            animation: {
                'fade-in': 'fadeIn .5s ease-out;',
            },
            backgroundImage: {
                'ts-chevron': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-chevron-down'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E\")",
                'ts-chevron-dark': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-chevron-down'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E\")",
            },
            keyframes: {
                fadeIn: {
                    '0%': {opacity: 0},
                    '100%': {opacity: 1},
                },
            },
            listStyleImage: {
                role : "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2335a73c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-user-shield'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h2' /%3E%3Cpath d='M22 16c0 4 -2.5 6 -3.5 6s-3.5 -2 -3.5 -6c1 0 2.5 -.5 3.5 -1.5c1 1 2.5 1.5 3.5 1.5z' /%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /%3E%3C/svg%3E\")",
            },
        },
    },
    plugins: [
        plugin(function ({addVariant}) {
            addVariant('turbo-frame', 'turbo-frame[src] &')
            addVariant('modal', 'dialog &');
        }),
    ],
}

[J4VMC]

I may have a more advanced case, not sure. I'm struggling with figuring out how tailwind now handles the theme extends and plugins... the upgrade tool seems totally useless. My tailwind.config.js:

Here is the new way: https://tailwindcss.com/docs/theme

I'm using this in assets/styles/app.css

TailwindCSS 4 uses the new theme variables instead of the config file.

[dsands]

The tailwind:init command still needs work for v4 #95, but for v4, here's what you need:
A) Delete tailwind.config.js (content is now automatic) B) In app.css:
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
C) Create or update config/packages/symfonycasts_tailwind.yaml:
symfonycasts_tailwind:

Specify the EXACT version of Tailwind CSS you want to use

binary_version: 'v4.0.10'
D) Clear cache to make sure the new binary is downloaded:

php bin/console cache:clear

E) restart tailwind:build
Hope that helps!

I may have a more advanced case, not sure. I'm struggling with figuring out how tailwind now handles the theme extends and plugins... the upgrade tool seems totally useless. My tailwind.config.js:

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

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig",
            "./assets/**/*.js",
        "./templates/**/*.html.twig",
        "./src/Twig/Components/**/*.php"
    ],
    darkMode: 'class',
    theme: {
        extend: {
            animation: {
                'fade-in': 'fadeIn .5s ease-out;',
            },
            backgroundImage: {
                'ts-chevron': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-chevron-down'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E\")",
                'ts-chevron-dark': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-chevron-down'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E\")",
            },
            keyframes: {
                fadeIn: {
                    '0%': {opacity: 0},
                    '100%': {opacity: 1},
                },
            },
            listStyleImage: {
                role : "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2335a73c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-user-shield'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h2' /%3E%3Cpath d='M22 16c0 4 -2.5 6 -3.5 6s-3.5 -2 -3.5 -6c1 0 2.5 -.5 3.5 -1.5c1 1 2.5 1.5 3.5 1.5z' /%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /%3E%3C/svg%3E\")",
            },
        },
    },
    plugins: [
        plugin(function ({addVariant}) {
            addVariant('turbo-frame', 'turbo-frame[src] &')
            addVariant('modal', 'dialog &');
        }),
    ],
}

Here is my completed (and working) config - ended up not being all that hard, just a little under-documented for us noobs :)
app.css

/*@tailwind base;*/
/*@tailwind components;*/
/*@tailwind utilities;*/

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant turbo-frame (turbo-frame[src] &);
@custom-variant modal (dialog &);

@theme {
    --animate-fade-in: fade-in 0.5s ease-out;
    @keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}

symfonycasts_tailwind.yaml

symfonycasts_tailwind:
#    binary_version: v3.4.17
    binary_version: v4.0.14

[xamayca]

The tailwind:init command still needs work for v4 #95, but for v4, here's what you need:

A) Delete tailwind.config.js (content is now automatic) B) In app.css:

--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
C) Create or update config/packages/symfonycasts_tailwind.yaml:

symfonycasts_tailwind:
# Specify the EXACT version of Tailwind CSS you want to use
binary_version: 'v4.0.10'
D) Clear cache to make sure the new binary is downloaded:

php bin/console cache:clear

E) restart tailwind:build

Hope that helps!

Thanks for that, the symfony documentation doesn't specify that if you use tailwind 4+ you have to do this manipulation, it worked for me and my build is done correctly in tailwind 4.1.7 & symfony 7.2