Add support for CSS configuration

README.md

@@ -16,10 +16,21 @@ npm install -D tailwind-mq
 yarn add -D tailwind-mq
 ```
 
-Add it to the plugins array of your Tailwind config. Call the functions for the utilities you want to use.
+### When using CSS config
+
+Add an import for the plugin in your CSS file.
+
+```css
+@import "tailwind-mq";
+```
+
+### When using JS config
+
+Add it to the plugins array of your Tailwind config.
 
 ```js
-const { mediaQueries } = require('tailwind-mq');
+import { mediaQueries } from 'tailwind-mq';
+// const { mediaQueries } = require('tailwind-mq'); // for CommonJS
 
 plugins: [
 	mediaQueries(), // no options to configure

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-mq",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Tailwind plugin for various media query variants",
   "keywords": [
@@ -21,16 +21,20 @@
   "source": "src/index.ts",
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "style": "./dist/index.css",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./index.css": "./dist/index.css",
+    "./index": "./dist/index.css",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "microbundle --target node --sourcemap false --format cjs,modern"
+    "build": "microbundle --target node --sourcemap false --format cjs,modern && cp src/index.css dist/index.css"
   },
   "devDependencies": {
     "microbundle": "^0.15.1"

src/index.css

@@ -0,0 +1,22 @@
+@variant transparency-reduce (@media(prefers-reduced-transparency: reduce));
+@variant transparency-safe (@media(prefers-reduced-transparency: no-preference));
+@variant inverted-colors (@media(inverted-colors: inverted));
+@variant data-reduce (@media(prefers-reduced-data: reduce));
+@variant contrast-custom (@media(prefers-contrast: custom));
+@variant noscript (@media(scripting: none));
+@variant scripting (@media(scripting: enabled));
+@variant scripting-initial (@media(scripting: initial-only));
+@variant update-none (@media(update: none));
+@variant update-slow (@media(update: slow));
+@variant update-fast (@media(update: fast));
+@variant overflow-block-none (@media(overflow-block: none));
+@variant overflow-block-scroll (@media(overflow-block: scroll));
+@variant overflow-block-optional-paged (@media(overflow-block: optional-paged));
+@variant overflow-block-paged (@media(overflow-block: paged));
+@variant overflow-inline-none (@media(overflow-inline: none));
+@variant overflow-inline-scroll (@media(overflow-inline: scroll));
+@variant sdr (@media(dynamic-range: standard));
+@variant hdr (@media(dynamic-range: high));
+@variant srgb (@media(color-gamut: srgb));
+@variant p3 (@media(color-gamut: p3));
+@variant rec2020 (@media(color-gamut: rec2020));