25.11 Pointing Tailwind at your Component PHP Classes

 - Though, one detail. Tailwind scans our source files, finds all the Tailwind classes we're using and includes those in the final CSS file. And because we're now including classes inside PHP, we need to make sure Tailwind sees those.

 In tailwind.config.js, on top, I'll paste in one more line to make it scan our Twig component PHP classes

 Changing the Component Tag Name
 - Ok, we're nearly done for today - but I want to celebrate and use the new component in one more spot: on the voyage index page, for the "New Voyage" button.

 Open index.html.twig... change this to a <twig:Button>... then we can remove most of these classes. The bold is specific to this spot I think

 When we refresh... it renders! Though... when I click... nothing happens! You probably saw why: this is now a button, not an a tag.

 That's okay: we can make our component just a bit more flexible. In Button.php, add another property: string $tag defaulting to button

 Then in the template, use {{ tag }} for the starting tag and the ending tag

 Finish in index.html.twig: pass tag="a"

 Now over here... when we click... got it!

 That's it! I hope you love Twig components as much as I do. But they can do even more! I didn't tell you how you can prefix any attribute with : to pass dynamic Twig variables or expressions to a prop. We also didn't discuss that the component PHP classes are services. Yea, you can add an __construct() function, autowire other services, like VoyageRepository, then use those to provide data to your template... making the entire component standalone and self-sufficient. That's one of my favorite features.

 Tomorrow we're going to keep leveraging Twig components to create a modal component... then see just how easily we can use modals whenever we want.

src/Twig/Components/Button.php

@@ -7,6 +7,7 @@
 #[AsTwigComponent]
 final class Button {
 	public string $variant = 'default';
+	public string $tag = 'button';
 
 	public function getVariantClasses():string {
 		return match ($this->variant) {

tailwind.config.js

@@ -5,7 +5,8 @@ module.exports = {
   content: [
     "./assets/**/*.js",
     "./templates/**/*.html.twig",
-    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
+    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig",
+    "./src/Twig/Components/**/*.php"
   ],
   theme: {
     extend: {

templates/components/Button.html.twig

@@ -1,5 +1,5 @@
-<button {{ attributes.defaults({
+<{{ tag }} {{ attributes.defaults({
   class: 'px-4 py-2 border border-transparent text-sm font-medium rounded-md '~this.variantClasses
 }) }}>
   {% block content %}{% endblock %}
-</button>
+</{{ tag }}>

templates/voyage/index.html.twig

@@ -6,14 +6,15 @@
   <div class="m-4 p-4 bg-gray-800 rounded-lg">
     <div class="flex justify-between">
       <h1 class="text-xl font-semibold text-white mb-4">Voyages</h1>
-      <a
+      <twig:Button
+          tag="a"
           href="{{ path('app_voyage_new') }}"
           data-turbo-frame="modal"
-          class="flex items-center space-x-1 bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold px-4 rounded"
+          class="flex items-center space-x-1 font-bold"
       >
         <span>New Voyage</span>
         <svg xmlns="http://www.w3.org/2000/svg" class="w-4 inline" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M9 12h6" /><path d="M12 9v6" /></svg>
-      </a>
+      </twig:Button>
     </div>
 
     <table class="min-w-full bg-gray-800 text-white" id="voyage-list">