✨ add Tailwind and PostCSS

.gitignore

@@ -10,6 +10,8 @@
 
 # production
 /build
+/dist
+/storybook-static
 
 # misc
 .DS_Store

.storybook/main.js

@@ -7,5 +7,5 @@ module.exports = {
     "@whitespace/storybook-addon-html",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-  ]
+  ],
 }

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview-head.html

@@ -0,0 +1 @@
+<!-- Pull in static files served from your Static director or the internet -->

.storybook/preview.js

@@ -1,3 +1,4 @@
+import '!style-loader!css-loader!./../build/styles.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  colorPrimary: '#06B6D4',
+  colorSecondary: '#06B6D4',
+  appContentBg: '#fff',
+  brandTitle: 'Storybox',
+});

package.json

@@ -6,20 +6,38 @@
   "author": "github/frontend",
   "license": "MIT",
   "scripts": {
-    "storybook": "NODE_PATH=src start-storybook -p 6006",
-    "build-storybook": "NODE_PATH=src build-storybook"
+    "clean": "rm -rf node_modules/.cache",
+    "tailwind:dev": "postcss src/styles/base.css -o build/styles.css",
+    "tailwind:build": "export NODE_ENV=production && yarn run tailwind:dev",
+    "tailwind:watch": "chokidar \"src/**/*.css\" \"tailwind.config.js\" -c \"yarn run tailwind:dev\"",
+    "tailwind:start": "yarn run tailwind:dev && yarn run tailwind:watch",
+    "storybook:start": "yarn run clean && NODE_PATH=src start-storybook -s ./build -p 6006",
+    "storybook:build": "NODE_PATH=src build-storybook",
+    "start": "concurrently \"yarn tailwind:start\" \"yarn storybook:start\"",
+    "build": "yarn tailwind:build"
   },
   "dependencies": {
+    "autoprefixer": "^10.1.0",
+    "postcss": "^8.2.1",
+    "postcss-import": "^14.0.0",
+    "postcss-nested": "^5.0.3",
+    "postcss-preset-env": "^6.7.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "tailwindcss": "^2.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@storybook/addon-actions": "^6.1.11",
     "@storybook/addon-essentials": "^6.1.11",
     "@storybook/addon-links": "^6.1.11",
     "@storybook/react": "^6.1.11",
+    "@storybook/theming": "^6.1.11",
     "@whitespace/storybook-addon-html": "^4.0.2",
-    "babel-loader": "^8.2.2"
+    "babel-loader": "^8.2.2",
+    "chokidar-cli": "^2.1.0",
+    "concurrently": "^5.3.0",
+    "css-loader": "^5.0.1",
+    "postcss-cli": "^8.3.1"
   }
 }

postcss.config.js

@@ -0,0 +1,11 @@
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    tailwindcss('./tailwind.config.js'),
+    require('postcss-nested'),
+    require('postcss-preset-env')({ stage: 1 }),
+    require('autoprefixer'),
+  ]
+}

src/components/atoms/Button/Button.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Button.css';
 
 type Props = {
   primary?: boolean,

src/components/organisms/Header/Header.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import Button from 'components/atoms/Button';
-import './Header.css';
 
 const Header = (): JSX.Element => (
   <header>

src/components/pages/Homepage/Page.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Header from 'components/organisms/Header';
-import './Page.css';
 
 const Page = (): JSX.Element => (
   <article>

src/styles/base.css

@@ -0,0 +1,6 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+@import "../components/atoms/Button/Button.css";
+@import "../components/organisms/Header/Header.css";
+@import "../components/pages/Homepage/Page.css";

tailwind.config.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+  purge: [
+    './src/**/*.tsx',
+  ],
+  theme: {
+    ...defaultTheme,
+  },
+};