Merge pull request #79 from tailwindlabs/prepare-tailwind-2.0

Prepare for Tailwind 2.0

Author: RobinMalfait

package.json

@@ -5,13 +5,22 @@
   "main": "src/index.js",
   "repository": "https://github.com/tailwindcss/typography",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
   "scripts": {
     "dev": "next dev demo",
     "build": "next build demo",
     "export": "next export demo",
     "deploy": "npm run build && npm run export",
     "start": "next start demo",
-    "prepare": "node scripts/build.js"
+    "prepublishOnly": "node scripts/build.js"
   },
   "peerDependencies": {
     "tailwindcss": "^1.5.0"
@@ -29,6 +38,6 @@
     "postcss": "^7.0.17",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "tailwindcss": "^1.5"
+    "tailwindcss": "^2.0.0-alpha.1"
   }
 }

src/index.js

@@ -25,7 +25,10 @@ module.exports = plugin.withOptions(
       addComponents(
         [
           {
-            [`.${className}`]: merge(...castArray(styles.default.css), configToCss(config.default || {})),
+            [`.${className}`]: merge(
+              ...castArray(styles.default.css),
+              configToCss(config.default || {})
+            ),
           },
           ...modifiers.map((modifier) => ({
             [`.${className}-${modifier}`]: merge(

src/styles.js

@@ -15,7 +15,7 @@ module.exports = {
         color: defaultTheme.colors.gray[700],
         maxWidth: '65ch',
         '[class~="lead"]': {
-          color: defaultTheme.colors.gray[700],
+          color: defaultTheme.colors.gray[600],
         },
         a: {
           color: defaultTheme.colors.gray[900],
@@ -36,27 +36,27 @@ module.exports = {
           content: 'counter(list-counter) "."',
           position: 'absolute',
           fontWeight: '400',
-          color: defaultTheme.colors.gray[600],
+          color: defaultTheme.colors.gray[500],
         },
         'ul > li': {
           position: 'relative',
         },
         'ul > li::before': {
           content: '""',
           position: 'absolute',
-          backgroundColor: defaultTheme.colors.gray[400],
+          backgroundColor: defaultTheme.colors.gray[300],
           borderRadius: '50%',
         },
         hr: {
-          borderColor: defaultTheme.colors.gray[300],
+          borderColor: defaultTheme.colors.gray[200],
           borderTopWidth: 1,
         },
         blockquote: {
           fontWeight: '500',
           fontStyle: 'italic',
           color: defaultTheme.colors.gray[900],
           borderLeftWidth: '0.25rem',
-          borderLeftColor: defaultTheme.colors.gray[300],
+          borderLeftColor: defaultTheme.colors.gray[200],
           quotes: '"\\201C""\\201D""\\2018""\\2019"',
         },
         'blockquote p:first-of-type::before': {
@@ -82,7 +82,7 @@ module.exports = {
           fontWeight: '600',
         },
         'figure figcaption': {
-          color: defaultTheme.colors.gray[600],
+          color: defaultTheme.colors.gray[500],
         },
         code: {
           color: defaultTheme.colors.gray[900],
@@ -95,7 +95,7 @@ module.exports = {
           content: '"`"',
         },
         pre: {
-          color: defaultTheme.colors.gray[300],
+          color: defaultTheme.colors.gray[200],
           backgroundColor: defaultTheme.colors.gray[800],
           overflowX: 'auto',
         },
@@ -127,14 +127,14 @@ module.exports = {
           color: defaultTheme.colors.gray[900],
           fontWeight: '600',
           borderBottomWidth: '1px',
-          borderBottomColor: defaultTheme.colors.gray[400],
+          borderBottomColor: defaultTheme.colors.gray[300],
         },
         'thead th': {
           verticalAlign: 'bottom',
         },
         'tbody tr': {
           borderBottomWidth: '1px',
-          borderBottomColor: defaultTheme.colors.gray[300],
+          borderBottomColor: defaultTheme.colors.gray[200],
         },
         'tbody tr:last-child': {
           borderBottomWidth: '0',