add tailwind to storybook

Author: jscottsmith

.storybook/main.js

@@ -1,6 +1,14 @@
 module.exports = {
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
   addons: [
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     {

package.json

@@ -82,6 +82,7 @@
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addons": "^6.3.12",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.3.12",
@@ -93,6 +94,7 @@
     "css-loader": "^5.0.0",
     "husky": "^7.0.4",
     "np": "^7.6.0",
+    "postcss": "^8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
@@ -101,6 +103,7 @@
     "sass-loader": "^10.1.0",
     "size-limit": "^6.0.4",
     "style-loader": "^2.0.0",
+    "tailwindcss": "^2.2.19",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
     "typescript": "^4.4.4"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

stories/Parallax/7_ParallaxEasing.stories.tsx

@@ -76,6 +76,79 @@ WithEasing.args = {
   easing: options[0],
 };
 
+const Template2 = () => {
+  const amount = 16;
+  const offA = 0;
+  const offB = 500;
+  const unit = 'px';
+  const elements = new Array(amount).fill(null).map((x, i) => i);
+
+  return (
+    <ParallaxProvider>
+      <div className="w-full p-20">
+        {options.map((easing) => (
+          <div
+            className="relative flex flex-row items-center justify-between"
+            style={{ height: '150vh' }}
+          >
+            <h1 className="absolute top-1/2 left-0 w-full text-center text-white text-4xl z-10">
+              {easing}
+            </h1>
+            <div className="w-1/2 flex flex-col">
+              {elements.map((_, i) => {
+                const n = amount - i;
+                return (
+                  <Parallax
+                    key={n}
+                    className="bg-blue-500 m-1 opacity-1 w-10 h-10"
+                    easing={easing}
+                    rootMargin={{
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      left: 0,
+                    }}
+                    rotate={[0, 90]}
+                    translateX={[`${offA}${unit}`, `${offB}${unit}`]}
+                    // translateX={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
+                  >
+                    <div className="w-10 h-10 bg-purple-400 rounded-md" />
+                  </Parallax>
+                );
+              })}
+            </div>
+            <div className="w-1/2 flex flex-col items-end">
+              {elements.map((_, i) => {
+                const n = amount - i;
+                return (
+                  <Parallax
+                    key={n}
+                    className="bg-blue-500 m-1 opacity-1 w-10 h-10"
+                    easing={easing}
+                    rootMargin={{
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      left: 0,
+                    }}
+                    rotate={[0, 90]}
+                    translateX={[`${-1 * offA}${unit}`, `${-1 * offB}${unit}`]}
+                    // translateX={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
+                  >
+                    <div className="w-10 h-10 bg-green-400 rounded-md" />
+                  </Parallax>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </ParallaxProvider>
+  );
+};
+
+export const WithAllEasing = Template2.bind({});
+
 export default {
   title: '<Parallax> Easing',
   component: WithEasing,

stories/styles.css

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
 
 html {

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./stories/**/*.tsx'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};