Merge pull request tailwindlabs#1 from tailwindcss/next

sync next

config.staging.php

@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'baseUrl' => 'https://tailwindcss-next.netlify.com',
+    'production' => false,
+];

package.json

@@ -2,6 +2,7 @@
   "scripts": {
     "development": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js",
     "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "staging": "cross-env NODE_ENV=staging webpack --progress --hide-modules --env=staging --config=node_modules/laravel-mix/setup/webpack.config.js",
     "dev": "npm run development",
     "prod": "npm run production",
     "watch": "npm run development -- --watch"

source/_assets/js/components/TableOfContents.vue

@@ -1,7 +1,7 @@
 <template>
   <ul class="list-reset" v-if="links.length > 0">
     <li class="mb-2" :class="link.isChild ? 'ml-2' : ''" v-for="link in links">
-      <a :href="link.href" class="text-grey-dark hover:text-grey-darkest">{{ link.text }}</a>
+      <a :href="link.href" class="text-gray-600 hover:text-gray-900">{{ link.text }}</a>
     </li>
   </ul>
 </template>
@@ -35,7 +35,7 @@ export default {
     }
   },
   mounted() {
-    anchors.options = { placement: 'left', class: 'text-grey-dark' }
+    anchors.options = { placement: 'left', class: 'text-gray-500' }
     anchors.add()
     this.links = anchors.elements.filter((el) => _.includes(['H2', 'H3'], el.tagName)).map((el) => {
       return {

source/_assets/less/docsearch.less

@@ -9,7 +9,7 @@
     }
 
     .algolia-docsearch-suggestion--highlight {
-      color: config('colors.tailwind-teal');
+      color: theme('colors.tailwind-teal');
       background: rgba(68, 168, 179, .1);
     }
   }
@@ -20,7 +20,7 @@
     min-width: 0 !important;
   }
 
-  @media (max-width: config('screens.md')) {
+  @media (max-width: theme('screens.md')) {
 
     .algolia-docsearch-suggestion--subcategory-column {
       display: none !important;

source/_assets/less/main.less

@@ -87,15 +87,15 @@ a {
   border-collapse: collapse;
 }
 
-.placeholder-grey-dark::placeholder {
+.placeholder-gray-700::placeholder {
   @apply text-gray-700;
 }
 
-.placeholder-grey-darker::placeholder {
+.placeholder-gray-800::placeholder {
   @apply text-gray-800;
 }
 
-.placeholder-grey-darkest::placeholder {
+.placeholder-gray-900::placeholder {
   @apply text-gray-900;
 }
 
@@ -106,5 +106,3 @@ a {
 [v-cloak] .v-cloak-hidden {
   display: none;
 }
-
-

source/_assets/less/markdown.less

@@ -74,15 +74,15 @@
   > h1, h1& {
     @apply mb-1;
     @apply leading-none;
-    @apply text-black;
+    @apply text-gray-900;
     @apply font-semibold;
     @apply text-4xl;
   }
 
   > h2, h2& {
     @apply mt-12;
     @apply mb-4;
-    @apply text-black;
+    @apply text-gray-900;
     @apply leading-none;
     @apply font-semibold;
     @apply text-2xl;
@@ -95,7 +95,7 @@
   > h3, h3& {
     @apply mt-12;
     @apply mb-4;
-    @apply text-black;
+    @apply text-gray-900;
     @apply leading-none;
     @apply font-semibold;
     @apply text-xl;
@@ -104,7 +104,7 @@
   > h4, h4& {
     @apply mt-8;
     @apply mb-0;
-    @apply text-black;
+    @apply text-gray-900;
     @apply leading-none;
     @apply font-semibold;
     @apply text-base;

source/_layouts/documentation.blade.php

@@ -21,7 +21,7 @@
 @section('body')
 
 {{-- Top nav --}}
-<div class="flex bg-white border-b border-grey-lighter fixed top-0 inset-x-0 z-100 h-16 items-center">
+<div class="flex bg-white border-b border-gray-200 fixed top-0 inset-x-0 z-100 h-16 items-center">
   <div class="w-full max-w-screen-xl relative mx-auto px-6">
     <div class="flex items-center -mx-6">
 
@@ -31,7 +31,7 @@
           <a href="/" class="block lg:mr-4">
             <svg class="w-8 h-8 lg:w-12 lg:h-12 block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"></path></svg>
           </a>
-          <a href="https://github.com/tailwindcss/tailwindcss/releases" class="hidden lg:block font-semibold text-lg text-grey hover:text-grey-darker">
+          <a href="https://github.com/tailwindcss/tailwindcss/releases" class="hidden lg:block font-semibold text-base text-gray-500 hover:text-gray-700">
             v{{ $page->version }}
           </a>
         </div>
@@ -42,9 +42,9 @@
         {{-- Search section --}}
         <div class="w-full lg:px-6 lg:w-3/4 xl:px-12">
           <div class="relative">
-            <input id="docsearch" class="transition focus:outline-0 border border-transparent focus:bg-white focus:border-grey-light placeholder-grey-darkest rounded bg-grey-lighter py-2 pr-4 pl-10 block w-full appearance-none leading-normal" type="text" placeholder="Search the docs (Press &quot;/&quot; to focus)">
+            <input id="docsearch" class="transition focus:outline-0 border border-transparent focus:bg-white focus:border-gray-300 placeholder-gray-900 rounded bg-gray-200 py-2 pr-4 pl-10 block w-full appearance-none leading-normal" type="text" placeholder="Search the docs (Press &quot;/&quot; to focus)">
             <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-              <svg class="fill-current pointer-events-none text-grey-dark w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
+              <svg class="fill-current pointer-events-none text-gray-600 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
             </div>
           </div>
         </div>
@@ -61,14 +61,14 @@
 
         {{-- Links section --}}
         <div class="hidden lg:block lg:w-1/4 px-6">
-          <div class="flex justify-start items-center text-grey">
-            <a class="block flex items-center hover:text-grey-darker mr-6" href="https://github.com/tailwindcss/tailwindcss">
+          <div class="flex justify-start items-center text-gray-500">
+            <a class="block flex items-center hover:text-gray-700 mr-6" href="https://github.com/tailwindcss/tailwindcss">
               <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"/></svg>
             </a>
-            <a class="block flex items-center hover:text-grey-darker mr-6" href="https://twitter.com/tailwindcss">
+            <a class="block flex items-center hover:text-gray-700 mr-6" href="https://twitter.com/tailwindcss">
               <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Twitter</title><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"/></svg>
             </a>
-            <a class="block flex items-center hover:text-grey-darker" href="https://discord.gg/7NF8GNe">
+            <a class="block flex items-center hover:text-gray-700" href="https://discord.gg/7NF8GNe">
               <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146 146"><title>Discord</title><path d="M107.75 125.001s-4.5-5.375-8.25-10.125c16.375-4.625 22.625-14.875 22.625-14.875-5.125 3.375-10 5.75-14.375 7.375-6.25 2.625-12.25 4.375-18.125 5.375-12 2.25-23 1.625-32.375-.125-7.125-1.375-13.25-3.375-18.375-5.375-2.875-1.125-6-2.5-9.125-4.25-.375-.25-.75-.375-1.125-.625-.25-.125-.375-.25-.5-.375-2.25-1.25-3.5-2.125-3.5-2.125s6 10 21.875 14.75c-3.75 4.75-8.375 10.375-8.375 10.375-27.625-.875-38.125-19-38.125-19 0-40.25 18-72.875 18-72.875 18-13.5 35.125-13.125 35.125-13.125l1.25 1.5c-22.5 6.5-32.875 16.375-32.875 16.375s2.75-1.5 7.375-3.625c13.375-5.875 24-7.5 28.375-7.875.75-.125 1.375-.25 2.125-.25 7.625-1 16.25-1.25 25.25-.25 11.875 1.375 24.625 4.875 37.625 12 0 0-9.875-9.375-31.125-15.875l1.75-2S110 19.626 128 33.126c0 0 18 32.625 18 72.875 0 0-10.625 18.125-38.25 19zM49.625 66.626c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875.125-7.625-5.625-13.875-12.75-13.875zm45.625 0c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875s-5.625-13.875-12.75-13.875z" fill-rule="nonzero"/></svg>
             </a>
           </div>
@@ -91,18 +91,18 @@
         <nav id="nav" class="px-6 pt-6 overflow-y-auto text-base lg:text-sm lg:py-12 lg:pl-6 lg:pr-8 sticky?lg:h-(screen-16)">
           @foreach ($page->navigation as $sectionName => $sectionItems)
           <div class="mb-8">
-            <p class="mb-3 lg:mb-2 text-grey uppercase tracking-wide font-bold text-sm lg:text-xs">{{ $sectionName }}</p>
+            <p class="mb-3 lg:mb-2 text-gray-500 uppercase tracking-wide font-bold text-sm lg:text-xs">{{ $sectionName }}</p>
             <ul>
               @foreach ($sectionItems as $name => $slugOrChildren)
                 @if (is_string($slugOrChildren))
-                  <li class="mb-3 lg:mb-2"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-teal-dark font-semibold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li>
+                  <li class="mb-3 lg:mb-2"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-teal-500 font-bold' : 'text-gray-800' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li>
                 @else
                   <li class="mb-3 lg:mb-2">
-                    <a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-3 lg:mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-teal-dark font-semibold' : 'text-grey-darkest' }}">{{ $name }}</a>
+                    <a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-3 lg:mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-teal-500 font-bold' : 'text-gray-800' }}">{{ $name }}</a>
                     <ul class="pl-4 {{ $page->anyChildrenActive($slugOrChildren) ? 'block' : 'hidden' }}">
                     @foreach ($slugOrChildren as $title => $link)
                       <li class="mb-3 lg:mb-2">
-                        <a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-teal-dark font-semibold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
+                        <a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-teal-500 font-bold' : 'text-gray-800' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
                           {{ $title }}
                         </a>
                       </li>
@@ -136,7 +136,7 @@
               @endif
 
               @if ($page->description)
-                <div class="text-xl text-grey-dark mb-4">
+                <div class="text-xl text-gray-600 mb-4">
                   {{ $page->description }}
                 </div>
               @endif

source/_layouts/master.blade.php

@@ -18,7 +18,7 @@
   <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
   @stack('headScripts')
 </head>
-<body data-sidebar-visible="true" class="font-source-sans font-normal text-black leading-normal">
+<body data-sidebar-visible="true" class="text-gray-900 leading-normal">
 
 @yield('body')
 

source/docs/background-color.blade.md

@@ -101,7 +101,7 @@ To control the background color of an element on focus, add the `focus:` prefix
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div class="max-w-xs w-full mx-auto">
-  <input class="border border-grey-light bg-grey-lighter focus:bg-white text-black appearance-none inline-block w-full border rounded py-3 px-4 focus:outline-none" placeholder="Focus me">
+  <input class="border border-grey-light bg-grey-lighter focus:bg-white text-gray-900 appearance-none inline-block w-full border rounded py-3 px-4 focus:outline-none" placeholder="Focus me">
 </div>
 
 @slot('code')

source/docs/border-color.blade.md

@@ -29,7 +29,7 @@ Control the border color of an element using the `.border-{color}` utilities.
 
 @component('_partials.code-sample', ['class' => 'text-center'])
 <div class="max-w-xs w-full mx-auto">
-  <input class="border border-red focus:border-blue bg-white text-black appearance-none block w-full text-black border rounded py-3 px-4 focus:outline-none" placeholder="Your email">
+  <input class="border border-red focus:border-blue bg-white text-gray-900 appearance-none block w-full text-gray-900 border rounded py-3 px-4 focus:outline-none" placeholder="Your email">
 </div>
 @slot('code')
 <input class="border border-red ...">
@@ -64,7 +64,7 @@ For more information about Tailwind's responsive design features, check out the
 </button>
 @endslot
 @slot('xl')
-<button class="border-2 border-black bg-transparent text-black py-2 px-4 font-semibold rounded">
+<button class="border-2 border-black bg-transparent text-gray-900 py-2 px-4 font-semibold rounded">
   Button
 </button>
 @endslot
@@ -103,7 +103,7 @@ To control the border color of an element on focus, add the `focus:` prefix to a
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div class="max-w-xs w-full mx-auto">
-  <input class="border border-grey-light focus:border-blue bg-white text-black appearance-none inline-block w-full text-black border rounded py-3 px-4 focus:outline-none" placeholder="Focus me">
+  <input class="border border-grey-light focus:border-blue bg-white text-gray-900 appearance-none inline-block w-full text-gray-900 border rounded py-3 px-4 focus:outline-none" placeholder="Focus me">
 </div>
 
 @slot('code')

source/docs/colors.blade.md

@@ -41,10 +41,10 @@ module.exports = {
 }
 ```
 
-You'll notice above that the color palette is also assigned to the `colors` key of your Tailwind config. This makes it easy to access them in your custom CSS using the `config()` function. For example:
+You'll notice above that the color palette is also assigned to the `colors` key of your Tailwind config. This makes it easy to access them in your custom CSS using the `theme()` function. For example:
 
 ```css
-.error { color: config('colors.grey-darker') }
+.error { color: theme('colors.grey-darker') }
 ```
 
 ## Naming

source/docs/configuration.blade.md

@@ -20,7 +20,7 @@ Generate a Tailwind config file for your project using the Tailwind CLI utility
   <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-grey-dark">[filename]</span></div>
 </div>
 
-By default, `tailwind init` will generate a `tailwind.js` config file at the root of your project, but feel free to name this file differently or store it in a different location if you prefer.
+By default, `tailwind init` will generate a `tailwind.config.js` config file at the root of your project, but feel free to name this file differently or store it in a different location if you prefer.
 
 ### Default configuration
 
@@ -32,7 +32,7 @@ Your generated configuration file contains all of Tailwind's default configurati
 
 ### Colors
 
-The `colors` property doesn't actually affect your generated CSS on its own, but it's the perfect place to centralize your color palette so you can refer to it in your own CSS using Tailwind's [`config()`](/docs/functions-and-directives#config) function.
+The `colors` property doesn't actually affect your generated CSS on its own, but it's the perfect place to centralize your color palette so you can refer to it in your own CSS using Tailwind's [`theme()`](/docs/functions-and-directives#config) function.
 
 ```js
 // ...

source/docs/controlling-file-size.blade.md

@@ -169,7 +169,7 @@ class TailwindExtractor {
   }
 }
 
-mix.postCss("./src/styles.css", "public/css", [tailwindcss("./tailwind.js")]);
+mix.postCss("./src/styles.css", "public/css", [tailwindcss("./tailwind.config.js")]);
 
 // Only run PurgeCSS during production builds for faster development builds
 // and so you still have the full set of utilities available during
@@ -200,10 +200,3 @@ if (mix.inProduction()) {
 ```
 
 For more information on working with PurgeCSS, [visit the PurgeCSS documentation](https://github.com/FullHuman/purgecss).
-
-
-
-
-
-
-

source/docs/examples/cards.blade.md

@@ -39,13 +39,13 @@ Tailwind doesn't include pre-designed card components out of the box, but they'r
         </svg>
         Members only
       </p>
-      <div class="text-black font-bold text-xl mb-2">Can coffee make you a better developer?</div>
+      <div class="text-gray-900 font-bold text-xl mb-2">Can coffee make you a better developer?</div>
       <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
     </div>
     <div class="flex items-center">
       <img class="w-10 h-10 rounded-full mr-4" src="{{ $page->baseUrl }}/img/jonathan.jpg" alt="Avatar of Jonathan Reinink">
       <div class="text-sm">
-        <p class="text-black leading-none">Jonathan Reinink</p>
+        <p class="text-gray-900 leading-none">Jonathan Reinink</p>
         <p class="text-grey-dark">Aug 18</p>
       </div>
     </div>

source/docs/examples/forms.blade.md

@@ -149,10 +149,10 @@ Tailwind doesn't include purpose-built form control classes out of the box, but
 <form class="w-full max-w-sm">
   <div class="flex items-center border-b border-b-2 border-teal py-2">
     <input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Jane Doe" aria-label="Full name">
-    <button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
+    <button class="flex-shrink-0 bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
       Sign Up
     </button>
-    <button class="flex-no-shrink border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 rounded" type="button">
+    <button class="flex-shrink-0 border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 rounded" type="button">
       Cancel
     </button>
   </div>