update to Tailwind CSS 0.2.1

Author: michaeldyrynda

README.md

@@ -2,7 +2,7 @@
 
 A Laravel front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.com) - a Utility-First CSS Framework for Rapid UI Development.
 
-*Current version:* **Tailwind CSS 0.1.6**
+*Current version:* **Tailwind CSS 0.2.1**
 
 ## Usage
 

src/TailwindCssPreset.php

@@ -27,7 +27,7 @@ public static function installAuth()
     protected static function updatePackageArray(array $packages)
     {
         return [
-            'tailwindcss' => '^0.1.6',
+            'tailwindcss' => '^0.2.1',
         ] + Arr::except($packages, ['bootstrap-sass', 'jquery']);
     }
 

src/tailwindcss-stubs/tailwind.js

@@ -24,7 +24,7 @@ View the full documentation at https://tailwindcss.com.
 |
 */
 
-// var defaultConfig = require('tailwindcss').defaultConfig()
+// var defaultConfig = require('tailwindcss/defaultConfig')()
 
 
 /*
@@ -157,10 +157,10 @@ module.exports = {
 
   /*
   |-----------------------------------------------------------------------------
-  | Screens                     https://tailwindcss.com//docs/responsive-design
+  | Screens                      https://tailwindcss.com/docs/responsive-design
   |-----------------------------------------------------------------------------
   |
-  | Screens in Tailwind are essentially CSS media queries. They define the
+  | Screens in Tailwind are translated to CSS media queries. They define the
   | responsive breakpoints for your project. By default Tailwind takes a
   | "mobile first" approach, where each screen size represents a minimum
   | viewport width. Feel free to have as few or as many screens as you
@@ -170,6 +170,8 @@ module.exports = {
   | useful in certain situations. Be sure to see the full responsive
   | documentation for a complete list of options.
   |
+  | Class name: .{screen}:{utility}
+  |
   */
 
   screens: {
@@ -210,6 +212,7 @@ module.exports = {
       'Fira Sans',
       'Droid Sans',
       'Helvetica Neue',
+      'sans-serif',
     ],
     'serif': [
       'Constantia',
@@ -263,8 +266,6 @@ module.exports = {
     '3xl': '1.875rem',  // 30px
     '4xl': '2.25rem',   // 36px
     '5xl': '3rem',      // 48px
-    '6xl': '4rem',      // 64px
-    '7xl': '5.25rem',   // 84px
   },
 
 
@@ -373,7 +374,7 @@ module.exports = {
   |
   | Here is where you define your border widths. Take note that border
   | widths require a special "default" value set as well. This is the
-  | width that will be used when you do not specify a border color.
+  | width that will be used when you do not specify a border width.
   |
   | Class name: .border{-side?}{-width?}
   |
@@ -413,20 +414,23 @@ module.exports = {
   | Border radius                    https://tailwindcss.com/docs/border-radius
   |-----------------------------------------------------------------------------
   |
-  | Here is where you define your border radius values. Take note that
-  | a default radius is required. This is the value used for the
-  | non-suffixed version of this utility (.rounded).
+  | Here is where you define your border radius values. If a `default` radius
+  | is provided, it will be made available as the non-suffixed `.rounded`
+  | utility.
+  |
+  | If your scale includes a `0` value to reset already rounded corners, it's
+  | a good idea to put it first so other values are able to override it.
   |
-  | Class name: .rounded-{radius?}
+  | Class name: .rounded{-side?}{-size?}
   |
   */
 
   borderRadius: {
-    default: '.25rem',
+    'none': '0',
     'sm': '.125rem',
+    default: '.25rem',
     'lg': '.5rem',
     'full': '9999px',
-    'none': '0',
   },
 
 
@@ -619,7 +623,7 @@ module.exports = {
   | common use-cases like "1px". You can, of course, modify these
   | values as needed.
   |
-  | Class name: .p{-side?}-{size}
+  | Class name: .p{side?}-{size}
   |
   */
 
@@ -646,11 +650,12 @@ module.exports = {
   | common use-cases like "1px". You can, of course, modify these
   | values as needed.
   |
-  | Class name: .m{-side?}-{size}
+  | Class name: .m{side?}-{size}
   |
   */
 
   margin: {
+    'auto': 'auto',
     'px': '1px',
     '0': '0',
     '1': '0.25rem',
@@ -673,7 +678,7 @@ module.exports = {
   | generally get used together. You can, of course, modify these
   | values as needed.
   |
-  | Class name: .-m{-side?}-{size}
+  | Class name: .-m{side?}-{size}
   |
   */
 
@@ -698,8 +703,8 @@ module.exports = {
   | the defaults we provide, it's possible to apply multiple shadows
   | per utility using comma separation.
   |
-  | Take note that a default shadow is required. This is the value used
-  | for the non-suffixed version of this utility (.shadow).
+  | If a `default` shadow is provided, it will be made available as the non-
+  | suffixed `.shadow` utility.
   |
   | Class name: .shadow-{size?}
   |
@@ -728,13 +733,13 @@ module.exports = {
   */
 
   zIndex: {
+    'auto': 'auto',
     '0': 0,
     '10': 10,
     '20': 20,
     '30': 30,
     '40': 40,
     '50': 50,
-    'auto': 'auto',
   },
 
 
@@ -762,17 +767,17 @@ module.exports = {
 
   /*
   |-----------------------------------------------------------------------------
-  | Packages
+  | Options                  https://tailwindcss.com/docs/configuration#options
   |-----------------------------------------------------------------------------
   |
-  | Here is where you can define the configuration for any Tailwind packages
-  | you're using. These can be utility packs, component bundles, or even
-  | complete themes. You'll want to reference each package's
-  | documentation for a list of settings available for it.
+  | Here is where you can set your Tailwind configuration options. For more
+  | details about these options, visit the configuration options documentation.
   |
   */
 
-  packages: {
+  options: {
+    prefix: '',
+    important: false,
   },
 
 }