refactor: unify styling

library/package.json

@@ -38,7 +38,12 @@
   ],
   "scripts": {
     "start": "tsc --watch",
-    "build": "tsc && npm run copyCss",
+    "build": "npm run build:code && npm run build:styles:dev",
+    "build:prod": "npm run build:code && npm run build:styles:prod",
+    "build:code": "tsc",
+    "build:styles": "postcss src/styles/styles.css -o lib/styles/styles.css",
+    "build:styles:dev": "postcss src/styles/styles.css -o lib/styles/styles.css",
+    "build:styles:prod": "NODE_ENV=production postcss src/styles/styles.css -o lib/styles/styles.css",
     "test": "jest --detectOpenHandles",
     "testWatch": "jest --detectOpenHandles --watch",
     "copyCss": "cp -r ./src/styles ./lib",
@@ -57,13 +62,18 @@
     "react-use": "^12.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.4.0",
     "@types/dompurify": "^2.0.4",
     "@types/jest": "^24.0.18",
     "@types/markdown-it": "^10.0.2",
     "@types/node": "^12.7.2",
     "@types/react": "^16.9.2",
+    "autoprefixer": "^10.2.5",
+    "cssnano": "^4.1.11",
     "jest": "^24.9.0",
+    "postcss-cli": "^8.3.1",
     "react": "^16.9.0",
+    "tailwindcss": "^2.1.1",
     "ts-jest": "^26.4.1"
   },
   "publishConfig": {

library/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    process.env.NODE_ENV === 'production' &&
+      require('cssnano')({
+        preset: 'default',
+      }),
+  ],
+};

library/src/components/Chevron.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export const Chevron: React.FunctionComponent = () => (
   <svg
-    className="expand inline align-baseline"
+    className="inline align-baseline cursor-pointer -mb-1 w-5 transform -rotate-90"
     version="1.1"
     viewBox="0 0 24 24"
     x="0"

library/src/components/Href.tsx

@@ -2,14 +2,22 @@ import React from 'react';
 
 interface Props {
   href: string;
+  title?: string;
+  className?: string;
 }
 
-export const Href: React.FunctionComponent<Props> = ({ href, children }) => (
+export const Href: React.FunctionComponent<Props> = ({
+  href,
+  title,
+  className,
+  children,
+}) => (
   <a
     href={href}
+    title={title}
+    className={className}
     target="_blank"
     rel="nofollow noopener noreferrer"
-    className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 font-bold no-underline text-orange-500 text-xs uppercase rounded mr-2 px-3 py-1"
   >
     {children}
   </a>

library/src/components/Markdown.tsx

@@ -13,5 +13,10 @@ export const Markdown: React.FunctionComponent = ({ children }) => {
   }
 
   const html = markdownIt.render(children);
-  return <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />;
+  return (
+    <div
+      className="prose text-sm max-w-max"
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }}
+    />
+  );
 };