docs: update readme about theme

Author: upupming

README.md

@@ -191,26 +191,40 @@ plugins: [
 
 </details>
 
-Then you can wrap you HTML elements with `themeable-example-theme` class to use the `example-theme` theme! All `text-themeable-*` class uses the CSS variable from the generated CSS of your configuration. `tailwindcss-themeable` already has two built-in themes (`dracula` and `material`) you can use directly.
+Then you can wrap you HTML elements with `themeable-example-theme` class to use the `example-theme` theme! All `text-themeable-*`, `bg-themeable-*`, and so on... classes use the CSS variable from the generated CSS of your configuration. `tailwindcss-themeable` already has two built-in themes (`dracula` and `material`) you can use directly.
 
 ```html
 <div class="themeable-example-theme">
-    <div class="text-themeable-foreground">
+    <div class="text-themeable-foreground bg-themeable-background">
         Hello world!
     </div>
 </div>
 <div class="themeable-dracula">
-    <div class="text-themeable-foreground">
+    <div class="text-themeable-foreground bg-themeable-background">
         Hello world!
     </div>
 </div>
 <div class="themeable-material">
-    <div class="text-themeable-foreground">
+    <div class="text-themeable-foreground bg-themeable-background">
         Hello world!
     </div>
 </div>
 ```
 
+Compiled CSS:
+
+```css
+.text-themeable-foreground {
+  --tw-text-opacity: 1;
+  color: rgba(var(--themeable-foreground), var(--tw-text-opacity));
+}
+
+.bg-themeable-background {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--themeable-background), var(--tw-bg-opacity));
+}
+```
+
 <hr>
 
 You can specify all the shades of a color if you want:

examples/windi/windi.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
     themeable({
       themes: [
         {
-          name: 'one-dark-pro',
+          name: 'example-theme',
           palette: {
             background: '#282A36',
             foreground: '#F8F8F2',

package.json

@@ -3,12 +3,17 @@
   "version": "1.0.0",
   "description": "multiple themes support for tailwindcss, with Dracula built-in",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsup",
     "dev": "tsup --watch src",
     "prepare": "husky install"
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/upupming/tailwindcss-themeable.git"