From a996bc55c4d6e06861ba36c54d36caad308a3fd4 Mon Sep 17 00:00:00 2001
From: Jason Quense <monastic.panic@gmail.com>
Date: Wed, 23 Mar 2022 14:45:05 -0400
Subject: [PATCH] docs: add some tailwind docs

---
 packages/tailwind/README.md  | 62 ++++++++++++++++++++++++++++++++++++
 www/docs/getting-started.mdx | 17 ++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 packages/tailwind/README.md

diff --git a/packages/tailwind/README.md b/packages/tailwind/README.md
new file mode 100644
index 000000000..0056a6cfe
--- /dev/null
+++ b/packages/tailwind/README.md
@@ -0,0 +1,62 @@
+# react-widgets-tailwind
+
+A TailwindCSS plugin for react-widgets as an alternative to Sass
+
+## Usage
+
+```
+npm i react-widgets-tailwind --save-dev
+```
+
+In your `tailwind.config.js` file:
+
+```js
+const ppath = require('path')
+
+module.exports = {
+  content: [
+    // point the JIT to the fully compiled css file to ensure all classes are included
+    require.resolve('react-widgets/styles.css'),
+  ],
+
+  /* ... */
+  plugins: [require('react-widgets-tailwind')],
+}
+```
+
+The additional config of `content` is required for tailwind v3 in order to inform tailwind what classes are
+actually in use.
+
+### Controling which components you include
+
+Relying on the Tailwind JIT to only include used styles doesn't work for react component libraries. This
+is because the JIT only looks at source files, not which components you've actually used in your app.
+
+To limit which component styles are included you can customize the plugin with the components you want:
+
+```js
+const ppath = require('path')
+
+module.exports = {
+  content: [
+    // point the JIT to the fully compiled css file to ensure all classes are included
+    require.resolve('react-widgets/styles.css'),
+  ],
+
+  /* ... */
+  plugins: [
+    require('react-widgets-tailwind')({
+      components: [
+        'Listbox',
+        'DropdownList',
+        'Combobox',
+        'Multiselect',
+        'DatePicker',
+        'Calendar',
+        'TimeInput',
+        'NumberPicker',
+      ],
+    }),
+  ],
+}
+```
diff --git a/www/docs/getting-started.mdx b/www/docs/getting-started.mdx
index 373de4080..2e158e39b 100644
--- a/www/docs/getting-started.mdx
+++ b/www/docs/getting-started.mdx
@@ -42,6 +42,7 @@ and don't require additional configuration.
   values={[
     { label: 'CSS', value: 'css' },
     { label: 'Sass', value: 'scss', },
+    { label: 'TailwindCSS', value: 'talwind', },
   ]
 }>
 <TabItem value="css">
@@ -57,6 +58,22 @@ import "react-widgets/styles.css";
 import "react-widgets/scss/styles.scss";
 ```
 
+</TabItem>
+<TabItem value="talwind">
+
+```js
+// in your tailwind.config.js
+{
+  content: [
+    // point the JIT to the fully compiled css file
+    // to ensure all classes are included
+    require.resolve('react-widgets/styles.css'),
+  ],
+
+  plugins: [require('react-widgets-tailwind')];
+}
+```
+
 </TabItem>
 </Tabs>