Update Tailwind instructions for README

Author: mitkins

README.md

@@ -134,41 +134,37 @@ alias PetalComponents.Button
 ```
 
 **Q: Does this increase my CSS filesize?**
-A: Tailwind will scan any folders you specify and hoover up CSS classes from files to include in your final CSS file. You specify the folders in `tailwind.config.js`. By default, we instruct you to just scan the whole Petal Components library:
+A: Tailwind will scan any folders you specify and hoover up CSS classes from files to include in your final CSS file. You specify the folders in `assets/app.css`. By default, we instruct you to just scan the whole Petal Components library:
 
-```js
-const colors = require("tailwindcss/colors");
-
-module.exports = {
-  purge: [
-    "../lib/*_web/**/*.*ex",
-    "./js/**/*.js",
+```css
+@import "tailwindcss";
 
-    // We need to include the Petal dependency so the classes get picked up by JIT.
-    "../deps/petal_components/**/*.*ex"
-  ],
+@source "../deps/petal_components/**/*.*ex";
+@import "../deps/petal_components/assets/default.css";
 
-  ... rest of file omitted
+... rest of file omitted
 ```
 
 You might be worried that if you don't use every component you'll have unused CSS classes. But we believe it's so small it won't matter. Our petal.build site's CSS file totals just 25kb.
 
 If you really want to you can instruct Tailwind to just scan the components you use:
 
-```
-"../deps/petal_components/lib/button.ex",
-"../deps/petal_components/lib/alert.ex",
+```css
+@source "../deps/petal_components/lib/button.ex",
+@source "../deps/petal_components/lib/alert.ex",
 ```
 
 **Q: Can I customize the components?**
 A: Yes! You can customize the components by overriding the CSS classes. For example, if you want to change the color of the button you can do this:
 
 ```css
-.pc-button {
-  @apply inline-flex items-center justify-center font-semibold tracking-wider uppercase transition duration-150 ease-in-out border-2 rounded-none focus:outline-hidden;
-}
-.pc-button--primary {
-  @apply text-black border-black bg-primary-400 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;
+@layer components {
+  .pc-button {
+    @apply inline-flex items-center justify-center font-semibold tracking-wider uppercase transition duration-150 ease-in-out border-2 rounded-none focus:outline-hidden;
+  }
+  .pc-button--primary {
+    @apply text-black border-black bg-primary-400 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;
+  }
 }
 ```
 

UPGRADE_GUIDE.md

@@ -38,7 +38,7 @@ mix tailwind.install
 
 `tailwind.config.js` is now considered legacy and is no longer automatically loaded. However, it is still supported and you can manually load it by adding the following to your `app.css`:
 
-```CSS
+```css
 @config "../tailwind.config.js";
 ```
 
@@ -50,7 +50,7 @@ Here are some tips on how to integrate Petal Components if you are no longer usi
 
 To reference Petal Components CSS and include it as a source for Tailwind utility classes, use the `@source` and `@import` directives:
 
-```CSS
+```css
 @import "tailwindcss";
 
 @source "../../deps/petal_components/**/*.*ex";
@@ -59,13 +59,13 @@ To reference Petal Components CSS and include it as a source for Tailwind utilit
 
 The CSS file equivalent of `darkMode: 'class'` is:
 
-```CSS
+```css
 @custom-variant dark (&:where(.dark, .dark *));
 ```
 
 In Tailwind 4 buttons now use `cursor: default` instead of `cursor: pointer`. If you would like the old behaviour:
 
-```CSS
+```css
 @layer base {
   /* Use the pointer for buttons */
   button:not(:disabled),
@@ -77,13 +77,13 @@ In Tailwind 4 buttons now use `cursor: default` instead of `cursor: pointer`. If
 
 To configure Petal Component colours add an `@import`:
 
-```CSS
+```css
 @import "./colors.css";
 ```
 
 Then create the `colors.css` file:
 
-```CSS
+```css
 @theme inline {
   --color-primary-50: var(--color-blue-50);
   --color-primary-100: var(--color-blue-100);
@@ -173,14 +173,14 @@ Then create the `colors.css` file:
 
 To add the "typography" and "form" plug-ins:
 
-```CSS
+```css
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 ```
 
 To re-create the heroicons JavaScript:
 
-```CSS
+```css
 @plugin "./tailwind_heroicons.js";
 ```