Symfony 7: CSS
Bootstrap
- Check SymfonyCasts info in upgrade tutorial: https://symfonycasts.com/screencast/symfony7-upgrade/asset-mapper-part2
- Check bootstrap examples: https://symfony.com/doc/current/frontend/asset_mapper.html
- Make forms use bootstrap theme: https://symfony.com/doc/current/form/bootstrap5.html
syc importmap:require bootstrap
assets/app.js:
import 'bootstrap/dist/css/bootstrap.min.css';
config/packages/twig.yaml:
twig:
form_themes: ['bootstrap_5_layout.html.twig']
Tabler
- Demo
- Documentation
- GitHub
-
note: seems that Tabler already includes bootstrap, only one should be installed.
syc importmap:require @tabler/core
# Error 404 requiring packages from jsDelivr for "@tabler/props". Check your package names. Response: Couldn't find the requested file.
# HTTP/2 404 returned for "https://cdn.jsdelivr.net/npm/@tabler/props@0.7.3/+esm".
# syc importmap:require @tabler/props
# Not used (yet)
# syc importmap:require @tabler/flags
assets/app.js
/**
* Tabler (includes Bootstrap)
*/
import '@tabler/core/dist/css/tabler.min.css';
import '@tabler/core';
Tailwind
composer require symfonycasts/tailwind-bundle
# one time
symfony console tailwind:init
# build: scans templates and creates css file (-w watch mode )
# (run this when using anything other then symfony server to run project on local)
symfony console tailwind:build -w
# if errors
rm -rf var/tailwind
Run automatically in dev server (symfony serve``):.symfony.local.yaml`:
workers:
tailwind:
cmd: ['symfony', 'console', 'tailwind:build', '--watch']
- Make forms use Tailwind theme: https://symfony.com/doc/current/form/tailwindcss.html