Chapters

23 Chapters | 2:07:02 |

01

¿Un mundo sin sistemas de construcción?

4:04
02

Hacer JS moderno directamente en tu navegador

7:41
03

Instalación de AssetMapper

3:03
04

Mapear Activos

6:01
05

CSS e imágenes de fondo

3:26
06

cSS de terceros

6:09
07

Añadir fuentes

3:02
08

CSS de Tailwind

5:47
09

JavaScript y mapa de importación

7:38
10

importmap:require - Libs JS de terceros

5:07
11

Importar archivos específicos de un paquete

4:54
12

Añadir Stimulus

8:04
13

Paquetes Symfony UX Stimulus

4:00
14

Controladores de Stimulus perezosos

2:28
15

Depurando

5:12
16

CSS y JS específicos de la página

5:05
17

Excluir archivos

3:53
18

Despliegue en Platform.sh

6:29
19

Configurar el despliegue de platform.sh

9:08
20

Desplegar los activos

5:04
21

Almacenamiento en caché a largo plazo, compresión y combinación de archivos

5:27
22

Optimización y perfiles

6:06
23

Carga previa

9:14

> Symfony > AssetMapper: JS Moderno sin Sistema de Compilación

Buy Access to Course

08.

CSS de Tailwind

|

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

8 Comments

Sort By

Login or Register to join the conversation

David-P 9 months ago edited

I know I'm late to the party, but a quick note about installing the standalone tailwindcss cli. At least on the Mac with V4 of tailwind, the downloaded file is not marked executable. You have to do a chmod +x tailwind...

1 |

Victor SFCASTS David-P 9 months ago edited

Hey David,

Hm, interesting... Thanks for this tip! Though it may depend on your current setup and the way how that file was downloaded and by which process :)

Could you try to delete it with rm -rf var/cache/tailwind/ and run bin/console tailwind:build? Does it still not executable for you that way?

I also wonder how exactly that file was downloaded in your case when you had permission problem.

Cheers!

|

creativx007 1 year ago

Hey everyone,

There is a version 4 of Tailwind – this causes the command bin/console tailwind:build -w to always load the latest version of the binary, which is currently version 4. If you don’t notice this and run the command, it breaks the entire CSS.

Is there a way to select the version of the binary, or is there an update for your bundle? :)

Cheers

|

Victor SFCASTS creativx007 1 year ago edited

Hey @creativx007 ,

Yeah, this is a known problem now, the bundle isn't ready for Tailwind v4 yet, you can track the main issue here: https://github.com/SymfonyCasts/tailwind-bundle/issues/81 . First of all, upgrading to the latest v0.7.1 should fix the problem: https://github.com/SymfonyCasts/tailwind-bundle/releases/tag/v0.7.1 - there's a workaround for continue using v3 of Tailwind. But yes, you can definitely configure any version of Tailwind binary you want, see the docs how to do it: https://symfony.com/bundles/TailwindBundle/current/index.html#using-a-different-binary

Cheers!

1 |

Singollo 2 years ago

For MacOS users, Tailwind CSS is also available as a brew formula: brew install tailwindcss

|

Victor SFCASTS Singollo 2 years ago

Hey Singollo,

Thanks for this tip for our Mac friends! :)

Cheers!

|

Amelielecoz 2 years ago

Hi, just for info, the Tailwind installation doc has changed and those two lines to copy in the tailwind.config.js

`content: [

"./assets/**/*.js",
"./templates/**/*.html.twig",

],`

have now become : content: ["./src/**/*.{html,js}"],

Only the first config works.
The second suggested on the official Tailwind installation page doesn't work.

|

weaverryan SFCASTS Amelielecoz 2 years ago

Hey @Amelielecoz!

It looks ok to me now on https://tailwindcss.com/docs/guides/symfony - perhaps they accidentally changed it and changed it back. Anyway, I'm happy they have the working version - the one-line doesn't isn't correct as you mentioned :).

Cheers!

|

Symfony 6.3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^4.0", // v4.2.0
        "doctrine/doctrine-bundle": "^2.7", // 2.10.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
        "doctrine/orm": "^2.12", // 2.15.2
        "knplabs/knp-time-bundle": "^1.18", // v1.20.0
        "pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
        "pagerfanta/twig": "^4.0", // v4.1.0
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
        "symfony/asset": "6.3.*", // v6.3.0
        "symfony/asset-mapper": "6.3.*", // v6.3.0
        "symfony/console": "6.3.*", // v6.3.0
        "symfony/dotenv": "6.3.*", // v6.3.0
        "symfony/flex": "^2", // v2.3.1
        "symfony/framework-bundle": "6.3.*", // v6.3.0
        "symfony/http-client": "6.3.*", // v6.3.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
        "symfony/runtime": "6.3.*", // v6.3.0
        "symfony/stimulus-bundle": "^2.9", // v2.9.1
        "symfony/twig-bundle": "6.3.*", // v6.3.0
        "symfony/ux-turbo": "^2.9", // v2.9.1
        "symfony/web-link": "6.3.*", // v6.3.0
        "symfony/yaml": "6.3.*", // v6.3.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.6.1
        "twig/twig": "^2.12|^3.0" // v3.6.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
        "symfony/debug-bundle": "6.3.*", // v6.3.0
        "symfony/maker-bundle": "^1.41", // v1.49.0
        "symfony/stopwatch": "6.3.*", // v6.3.0
        "symfony/web-profiler-bundle": "6.3.*", // v6.3.0
        "zenstruck/foundry": "^1.21" // v1.33.0
    }
}

Previous Chapter

Next Chapter