Extract reset to separate file, inline SUIT CSS Base, rename `@tailwi…

…nd` at-rules

css/preflight.css

@@ -0,0 +1,107 @@
+@import "normalize.css";
+
+/**
+ * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
+ * A thin layer on top of normalize.css that provides a starting point more
+ * suitable for web applications.
+ */
+
+/**
+ * 1. Prevent padding and border from affecting element width
+ * https://goo.gl/pYtbK7
+ * 2. Change the default font family in all browsers (opinionated)
+ */
+
+html {
+ box-sizing: border-box; /* 1 */
+ font-family: sans-serif; /* 2 */
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+
+/**
+ * Removes the default spacing and border for appropriate elements.
+ */
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+figure,
+p,
+pre {
+ margin: 0;
+}
+
+button {
+ background: transparent;
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Work around a Firefox/IE bug where the transparent `button` background
+ * results in a loss of the default `button` focus styles.
+ */
+
+button:focus {
+ outline: 1px dotted;
+ outline: 5px auto -webkit-focus-ring-color;
+}
+
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+iframe {
+ border: 0;
+}
+
+ol,
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/**
+ * Suppress the focus outline on elements that cannot be accessed via keyboard.
+ * This prevents an unwanted focus outline from appearing around elements that
+ * might still respond to pointer events.
+ */
+
+[tabindex="-1"]:focus {
+ outline: none !important;
+}
+
+/**
+ * Tailwind custom reset styles
+ */
+textarea { resize: vertical; }
+
+img { max-width: 100%; }
+
+svg { fill: currentColor; }
+
+input { font-family: inherit; }
+
+input::placeholder {
+ color: inherit;
+ opacity: .7;
+}
+
+button, [role=button] {
+ font-family: inherit;
+ cursor: pointer;
+}

css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind reset;
+
+@tailwind utilities;

docs/package.json

@@ -23,8 +23,7 @@
  "lodash": "^4.17.4",
  "normalize.css": "^7.0.0",
  "postcss-cssnext": "^3.0.2",
- "stylefmt": "^6.0.0",
- "suitcss-base": "^3.0.0"
+ "stylefmt": "^6.0.0"
  },
  "browserslist": [
  "> 1%"

docs/source/_assets/less/base.less

@@ -1,11 +1,4 @@
-@import (less) "../../../node_modules/normalize.css/normalize.css";
-@import (less) "../../../node_modules/suitcss-base/lib/base.css";
-
-@-moz-viewport { width: device-width; }
-@-ms-viewport { width: device-width; }
-@-o-viewport { width: device-width; }
-@-webkit-viewport { width: device-width; }
-@viewport { width: device-width; }
+@tailwind reset;
 
 html {
  @apply .bg-brand-soft;
@@ -37,18 +30,6 @@ body {
  line-height: 1.5;
 }
 
-textarea {
- resize: vertical;
-}
-
-button, [role=button] {
- cursor: pointer;
-}
-
-small {
- @apply .text-sm;
-}
-
 pre, code {
  @apply .mono;
 }

docs/source/_assets/less/main.less

@@ -4,7 +4,7 @@
 @import "markdown";
 @import "container";
 
-@tailwind-utilities all;
+@tailwind utilities;
 
 @import "utilities";
 

docs/source/_assets/less/markdown.less

@@ -26,9 +26,14 @@
  @apply .leading-none;
  @apply .wrap-none;
  @apply .text-pink-dark;
+ @apply .mono;
  vertical-align: middle;
  }
 
+ > pre, pre& {
+ @apply .mono;
+ }
+
  > blockquote, blockquote& {
  @apply .text-em;
  @apply .text-dark-soft;

docs/source/_layouts/master.blade.php

@@ -69,6 +69,7 @@
  <div class="mt-8">
  <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Styles</p>
  <ul class="mb-8">
+ <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/appearance" class="{{ $page->active('/appearance') ? 'text-dark text-medium' : 'text-dark-soft' }}">Appearance</a></li>
  <li class="mb-2">
@@ -79,7 +80,6 @@
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-dark text-medium' : 'text-dark-soft' }}">Size</a></li>
  </ul>
  </li>
- <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
  <li class="mb-2">
  <a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Borders</a>
  <ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
@@ -130,15 +130,14 @@
  </li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-dark text-medium' : 'text-dark-soft' }}">SVG</a></li>
  <li class="mb-2">
- <a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Text</a>
+ <a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Typography</a>
  <ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-dark text-medium' : 'text-dark-soft' }}">Fonts</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-dark text-medium' : 'text-dark-soft' }}">Weight</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Line Height</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Letter Spacing</a></li>
- <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/alignment" class="{{ $page->active('/text/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-dark text-medium' : 'text-dark-soft' }}">Wrapping</a></li>
  <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style &amp; Decoration</a></li>
  </ul>

docs/source/styles/borders/base.md

@@ -5,7 +5,6 @@ title: "Borders"
 
 # Borders
 
-
 <div class="subnav">
  <a class="subnav-link" href="#usage">Usage</a>
  <a class="subnav-link" href="#responsive">Responsive</a>

package.json

@@ -36,12 +36,11 @@
  "commander": "^2.11.0",
  "lodash": "^4.17.4",
  "nodemon": "^1.11.0",
- "normalize.css": "^6.0.0",
+ "normalize.css": "^7.0.0",
  "postcss": "^6.0.9",
  "postcss-import": "^11.0.0",
  "postcss-functions": "^3.0.0",
- "stylefmt": "^6.0.0",
- "suitcss-base": "^3.0.0"
+ "stylefmt": "^6.0.0"
  },
  "browserslist": [
  "> 1%"

src/build.js

@@ -5,10 +5,10 @@ import defaultConfig from './defaultConfig'
 
 console.info('Building Tailwind!')
 
-fs.readFile('./src/tailwind.css', (err, css) => {
+fs.readFile('./css/tailwind.css', (err, css) => {
  postcss([tailwind(defaultConfig)])
  .process(css, {
- from: './tailwind.css',
+ from: './css/tailwind.css',
  to: './dist/tailwind.css',
  map: {inline: false},
  })

src/lib/generateUtilities.js

@@ -38,8 +38,8 @@ import zIndex from '../generators/zIndex'
 
 export default function(options) {
  return function(css) {
- css.walkAtRules('tailwind-utilities', atRule => {
- if (atRule.params === 'all') {
+ css.walkAtRules('tailwind', atRule => {
+ if (atRule.params === 'utilities') {
  const utilities = _.flatten([
  appearance(options),
  textSizes(options),