@@ -755,120 +755,15 @@ component.
755755Using Tailwind CSS
756756------------------
757757
758- .. seealso ::
759-
760- Check out `symfonycasts/tailwind-bundle `_ for an even easier way to use
761- Tailwind with Symfony.
762-
763- Want to use the `Tailwind `_ CSS framework with the AssetMapper component? No problem.
764- First, install the ``tailwindcss `` binary. This can be installed via npm (run
765- ``npm --init `` if you don't already have a ``package.json `` file):
766-
767- .. code-block :: terminal
768-
769- $ npm install -D tailwindcss
770-
771- Or you can install the `Tailwind standalone binary `_, which does not require Node.
772-
773- Next, generate the ``tailwind.config.js `` file:
774-
775- .. code-block :: terminal
776-
777- $ npx tailwindcss init
778-
779- # or with the standalone binary:
780- $ ./tailwindcss init
781-
782- Update ``tailwind.config.js `` to point to your template and JavaScript files:
783-
784- .. code-block :: diff
785-
786- // tailwind.config.js
787- // ....
788-
789- - content: [],
790- + content: [
791- + "./assets/**/*.js",
792- + "./templates/**/*.html.twig",
793- + ],
794-
795- Then add the base lines to your ``assets/styles/app.css `` file:
796-
797- .. code-block :: css
798-
799- /* assets/styles/app.css */
800- @tailwind base;
801- @tailwind components;
802- @tailwind utilities;
803-
804- Now that Tailwind is setup, run the ``tailwindcss `` binary in "watch" mode
805- to build the CSS file to a new ``assets/app.built.css `` path:
806-
807- .. code-block :: terminal
808-
809- $ npx tailwindcss build -i assets/styles/app.css -o assets/styles/app.built.css --watch
810-
811- # or with the standalone binary:
812- $ ./tailwindcss build -i assets/styles/app.css -o assets/styles/app.built.css --watch
813-
814- Finally, instead of pointing directly to ``styles/app.css `` in your template,
815- point to the new ``styles/app.built.css `` file:
816-
817- .. code-block :: diff
818-
819- {# templates/base.html.twig #}
820-
821- - <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
822- + <link rel="stylesheet" href="{{ asset('styles/app.built.css') }}">
823-
824- Done! You can choose to ignore the ``assets/styles/app.built.css `` file from Git
825- or commit it to ease deployment.
758+ To use the `Tailwind `_ CSS framework with the AssetMapper component, check out
759+ `symfonycasts/tailwind-bundle `_.
826760
827761.. _asset-mapper-sass :
828762
829763Using Sass
830764----------
831765
832- To use Sass with the AssetMapper component, install the sass binary. You can
833- `download it from the latest GitHub release `_ (does not require Node) or
834- install it via npm:
835-
836- .. code-block :: terminal
837-
838- $ npm install -D dart-sass
839-
840- Next, create an ``assets/styles/app.scss `` file and write some dazzling CSS:
841-
842- .. code-block :: scss
843-
844- /* assets/styles/app.scss */
845- $primary-color: skyblue;
846-
847- body {
848- background: $primary-color;
849- }
850-
851- Then, run the ``dart-sass `` binary in "watch" mode to build the CSS file to a
852- new ``assets/styles/app.css `` path:
853-
854- .. code-block :: terminal
855-
856- $ npx dart-sass assets/styles/app.scss assets/styles/app.css --watch
857-
858- # or with the standalone binary:
859- ./sass assets/styles/app.scss assets/styles/app.css --watch
860-
861- In your template, point directly to the ``styles/app.css `` file (``base.html.twig ``
862- points to ``styles/app.css `` by default):
863-
864- .. code-block :: html+twig
865-
866- {# templates/base.html.twig #}
867- <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
868-
869- Done! You can choose to ignore the ``assets/styles/app.css `` file from Git
870- or commit it to ease deployment. To prevent the source ``.scss `` files from being
871- exposed to the public, see :ref: `exclude_patterns <excluded_patterns >`.
766+ To use Sass with AssetMapper component, check out `symfonycasts/sass-bundle `_.
872767
873768Third-Party Bundles & Custom Asset Paths
874769----------------------------------------
@@ -1152,9 +1047,8 @@ This will force the AssetMapper component to re-calculate the content of all fil
11521047.. _auto minify : https://developers.cloudflare.com/support/speed/optimization-file-size/using-cloudflare-auto-minify/
11531048.. _Lighthouse : https://developers.google.com/web/tools/lighthouse
11541049.. _Tailwind : https://tailwindcss.com/
1155- .. _Tailwind standalone binary : https://tailwindcss.com/blog/standalone-cli
1156- .. _download it from the latest GitHub release : https://github.com/sass/dart-sass/releases/latest
11571050.. _BabdevPagerfantaBundle : https://github.com/BabDev/PagerfantaBundle
11581051.. _Cloudflare : https://www.cloudflare.com/
11591052.. _EasyAdminBundle : https://github.com/EasyCorp/EasyAdminBundle
1160- .. _symfonycasts/tailwind-bundle : https://github.com/SymfonyCasts/tailwind-bundle
1053+ .. _symfonycasts/tailwind-bundle : https://symfony.com/bundles/TailwindBundle/current/index.html
1054+ .. _symfonycasts/sass-bundle : https://symfony.com/bundles/SassBundle/current/index.html
0 commit comments