readme update: clarify usage

Author: requestmethod

README.md

@@ -2,6 +2,52 @@
 
 A Tailwind CSS plugin to create themes using CSS classes and variables.
 
+# Overview
+
+Tailwind CSS doesn't support themes by default, but they offer a "[dark mode](https://tailwindcss.com/docs/dark-mode)" feature. This is a utility for specifying dark mode styles, not creating themes. This plugin aims to simplify adding themes with semantic color names that can be updated by passing in theme CSS classes to override styles.
+
+### Tailwind CSS "theming" with Dark Mode
+
+```html
+<!-- Card example w/ Tailwind CSS dark mode -->
+
+<div class="bg-gray-900 dark:bg-gray p-12">
+  <h3>Card w/ light theme</h3>
+  <p class="text-white dark:text-black">
+    This card example is styled using Tailwind color values that were set up for
+    you when you installed the plugin.
+  </p>
+</div>
+```
+
+### Tailwind CSS theming with this plugin
+
+```html
+<!-- Card example w/ light theme -->
+
+<div class="theme--light bg-background-primary p-12">
+  <h3>Card w/ light theme</h3>
+  <p class="text-white">
+    This card example is styled using Tailwind color values that were set up for
+    you when you installed the plugin.
+  </p>
+</div>
+```
+
+```html
+<!-- Card example w/ dark theme -->
+
+<div class="theme--dark bg-background-primary p-12">
+  <h3>Card w/ light theme</h3>
+  <p class="text-white">
+    This card example is styled using Tailwind color values that were set up for
+    you when you installed the plugin.
+  </p>
+</div>
+```
+
+This system significantly reduces CSS styling by avoiding dark classes altogether in favor of the theme classes. If you design your app using semantic color names, you can theming for free.
+
 # Usage
 
 ## Installation
@@ -24,7 +70,7 @@ npm install -D tailwind-plugin-css-themes
 plugins: [require("tailwind-plugin-css-themes").default({})];
 ```
 
-The plugin ships with light and dark themes by default. Once added to your config, you can start using it in your HTML.
+The plugin ships with a very basic light and dark theme by default. Once you add the plugin to your config, you can start using it in your HTML.
 
 ```html
 <!-- Card example w/ light theme -->
@@ -38,20 +84,6 @@ The plugin ships with light and dark themes by default. Once added to your confi
 </div>
 ```
 
-This is powerful because it enables you to switch themes by simply changing the theme class. Here's the same example above in a dark theme.
-
-```html
-<!-- Card example w/ dark theme -->
-
-<div class="theme--dark bg-background-primary">
-  <h3>Card w/ dark theme</h3>
-  <p class="text-content-primary">
-    This card example is styled using Tailwind color values that were set up for
-    you when you installed the plugin.
-  </p>
-</div>
-```
-
 ## Themes
 
 Themes are created similar to how you would [add colors to your Tailwind config](https://tailwindcss.com/docs/text-color#customizing-your-theme). Pass an object into the plugin containing a `themes` function. Create themes by returning an object of theme names containing custom color names (tokens) and values.
@@ -83,7 +115,7 @@ plugins: [
 ];
 ```
 
-The plugin turns your themes into [Tailwind component styles](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes), which lets us apply the themes using CSS classes. The resulting CSS looks like this:
+Behind the scenes, the plugin turns your themes into [Tailwind component styles](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes), which lets us apply the themes using CSS classes. The resulting CSS looks like this:
 
 ```css
 .theme--light {