From 2d10ade553a634917167974b7a646c2f54eafcf8 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Sun, 10 Mar 2024 13:13:01 -0500
Subject: [PATCH] Add Apply Tailwind Classes To Existing CSS Class as a
 Tailwind TIL

---
 README.md                                     |  3 +-
 ...-tailwind-classes-to-existing-css-class.md | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 tailwind/apply-tailwind-classes-to-existing-css-class.md

diff --git a/README.md b/README.md
index b4ff604..8116e8a 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1393 TILs and counting..._
+_1394 TILs and counting..._
 
 ---
 
@@ -1235,6 +1235,7 @@ _1393 TILs and counting..._
 
 ### Tailwind CSS
 
+- [Apply Tailwind Classes To Existing CSS Class](tailwind/apply-tailwind-classes-to-existing-css-class.md)
 - [Base Styles For Text Link](tailwind/base-styles-for-text-link.md)
 - [Specify Paths For Purging Unused CSS](tailwind/specify-paths-for-purging-unused-css.md)
 - [Use Tailwind Typography Prose In Dark Mode](tailwind/use-tailwind-typography-prose-in-dark-mode.md)
diff --git a/tailwind/apply-tailwind-classes-to-existing-css-class.md b/tailwind/apply-tailwind-classes-to-existing-css-class.md
new file mode 100644
index 0000000..87566a3
--- /dev/null
+++ b/tailwind/apply-tailwind-classes-to-existing-css-class.md
@@ -0,0 +1,33 @@
+# Apply Tailwind Classes To Existing CSS Class
+
+Let's say I have some HTML in my app that I don't totally control -- maybe it's
+a 3rd-party component or it was rendered by a markdown transformer. Regardless,
+I am ending up with some HTML where tags have class names that I'd like to
+style.
+
+```html
+<div class="code-block">
+  <!-- ... -->
+</div>
+```
+
+If it was HTML (or JSX) that I was writing, I could stick whatever tailwind
+class names I wanted on the various tags to get the styling just right. But
+since I don't control it directly, I have to find another way to _apply_ those
+tailwind classes.
+
+Enter [tailwind's `@apply`
+directive](https://tailwindcss.com/docs/functions-and-directives#apply). With
+this, I can target an existing class selector with any tailwind utility classes.
+Add lines like the following to your root `tailwind.css` file.
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* additional styling here 👇 */
+.code-block {
+  @apply bg-gray-200 rounded-md p-4;
+}
+```