v1.0.0-beta.6

• Removed negativeMargin plugin, now the regular margin plugin supports generating negative classes (like -mx-6) by using negative keys in the config, like -6 (#865, upgrade guide)
• Added support for negative inset (-top-6, -right-4) and z-index (-z-10) utilities, using the same negative key syntax supported by the margin plugin (#867, #875)
• Add missing fractions as well as x/12 fractions to width scale (#646)
• Add order utilities (#693)
• Add cursor-text class by default (#795)
• Make it possible to access your fully merged config file in JS (#877)

v1.0.0-beta.5

• Fix a bug where stroke and fill plugins didn't properly handle the next object syntax for color definitions (#821)
• Fix a bug where you couldn't have comments near @apply directives (#847)
• Make it possible to disable all core plugins using corePlugins: false (#849)
• Make it possible to configure a single list of variants that applies to all utility plugins (#852)
• Make it possible to whitelist which core plugins should be enabled (#853)

v1.0.0-beta.4

• Add the container key to the scaffolded config file when generated with --full (#792)
• Fixes an issue where the user's config object was being mutated during processing (only affects @bradlc 😅)
• Fixes an issue where you couldn't use a closure to define theme sections under extend (#803)
• Removes SFMono-Regular from the beginning of the default monospace font stack, it has no italic support and Menlo looks better anyways (#805)
• Bumps node dependency to 8.9.0 so we can keep our default config file clean, 6.9.0 is EOL next month anyways

v1.0.0-beta.3

• Support lazy evaluation in theme.extend: #775
• Use lighter default border color: #780
• Revert #745 and use bolder for strong tags by default instead of fontWeight.bold: #782

v1.0.0-beta.2

• Fix issue where @screen didn't work at all 🙃(#773)
• Closures in the theme section of the config file are now passed a theme function instead of an object (#774)

v1.0.0-beta.1

Tailwind CSS v1.0.0-beta.1

It's here! 🎉

This release of Tailwind focuses mostly on changing things from 0.x that I would have done differently had I known where the feature set would be at today in advance.

So while there's not a ton of exciting new features, you can at least be excited about the fact that we now have a really stable base to build on, and that very soon we'll be out of the unpredictable pre-1.0 phase so you can feel comfortable using Tailwind in production if the 0.x label gave you pause.

New features

• New config file structure: #637, Sample
• New expanded default color palette: #737
• New default maxWidth scale: #701
• Default variant output position can be customized: #657
• Extended default line-height scale: #673
• Extended default letter-spacing scale: #671
• object-position utilities are now customizable under theme.objectPosition: #676
• cursor utilities are now customizable under theme.cursors: #679
• flex-grow/shrink utilities are now customizable under theme.flexGrow/flexShrink: #690
• Added utilities for list-style-type and list-style-position: #761
• Added break-all utility: #763

Updated documentation

The documentation is still very much a work-in-progress (half of it is probably broken), but you can see the v1.0 documentation in its current state here:

https://next.tailwindcss.com/docs/what-is-tailwind/

If you notice any stale content, a pull request would be awesome:

https://github.com/tailwindcss/docs

Make sure you target the next branch.

Upgrade guide

Note: Some things have changed in later beta releases. If you are upgrading to the latest beta and not specifically to beta.1, follow the upgrade guide that's in the documentation: https://next.tailwindcss.com/docs/upgrading-to-v1

Steps that impact all users:

1. Update Tailwind
2. Update your config file
3. Rename tailwind.js to tailwind.config.js
4. Replace @tailwind preflight with @tailwind base
5. Replace config() with theme()
6. Explicitly style any headings
7. Explicitly style any lists that should have bullets/numbers
8. Remove any usage of .list-reset
9. Replace .pin-{side} with .{top|left|bottom|right|inset}-{value}
10. Replace .roman with .not-italic
11. Replace .flex-no-grow/shrink with .flex-grow/shrink-0
12. Explicitly add color and underline styles to links
13. Add inline to any replaced elements (img, video, etc.) that should not be display: block
14. Adjust the line-height and padding on your form elements
15. Adjust the text color on your form elements
16. Double check your default font family
17. Double check your default line-height

Additional steps for CDN users, or anyone that has a true dependency on our default configuration either by omitting sections from their config file, referencing our config file, or not using a config file at all:

1. Update any usage of text/bg/border-{color} classes
2. Replace tracking-tight/wide with tracking-tighter/wider
3. Check your design against the updated default breakpoints
4. Double check any usage of the default shadow-{size} utilities
5. Update any usage of the default max-w-{size} utilities

Additional steps for plugin authors:

1. Escape the class portion of any custom variants you have created

All users

Update Tailwind

While v1.0 is still in a pre-release state, you can pull it in to your project using npm:

npm install tailwindcss@next --save-dev

Or using Yarn:

yarn add -D tailwindcss@next

Update your config file

Impact: All users, Effort: Moderate

This is really the big change in v1.0 — you can read all about the new config file format and motivation behind it in the initial pull request.

The new general config structure looks like this:

module.exports = {
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    colors: { ... },
    // ...
    zIndex: { ... },
  },
  variants: {
    appearance: ['responsive'],
    // ...
    zIndex: ['responsive'],
  },
  plugins: [
    // ...
  ],
}

See the new default config file for a complete example.

There are a lot of changes here but they are all fairly cosmetic and entirely localized to this one file, so while it may look intimidating it's actually only 10-15 minutes of work.

1. Move all design-related top-level keys into a new section called theme.

   Every key except options, modules, and plugins should be nested under a new theme key.

   Your config file should look generally like this at this point:

     let defaultConfig = require('tailwindcss/defaultConfig')()
   
     let colors = {
       // ...
     }
   
     module.exports = {
   -   colors: colors,
   -   screens: {
   -     // ...
   -   },
   -   // ...
   -   zIndex: {
   -     // ...
   -   },
   +   theme: {
   +     colors: colors,
   +     screens: {
   +       // ...
   +     },
   +     // ...
   +     zIndex: {
   +       // ...
   +     },
   +   },
       modules: {
         appearance: ['responsive'],
         // ...
         zIndex: ['responsive'],
       },
       plugins: [
         require('tailwindcss/plugins/container')({
           // ...
         }),
       ],
       options: {
         prefix: '',
         important: false,
         separator: ':',
       }
     }

2. Rename modules to variants.

   "Modules" was a word we just kinda grabbed because we needed something, and we wanted to use that section of the config to both specify variants and disable modules if necessary.

   Now that all of Tailwind's internal "modules" are actually just core plugins, I've decided to deprecate this terminology entirely, and make this section of the config purely about configuring variants for core plugins.

   After making this change, your config file should look like this:

     let defaultConfig = require('tailwindcss/defaultConfig')()
   
     let colors = {
       // ...
     }
   
     module.exports = {
       theme: {
         // ...
       },
   -   modules: {
   +   variants: {
         appearance: ['responsive'],
         backgroundAttachment: ['responsive'],
         backgroundColors: ['responsive', 'hover', 'focus'],
         // ...
         zIndex: ['responsive'],
       },
       plugins: [
         require('tailwindcss/plugins/container')({
           // ...
         }),
       ],
       options: {
         prefix: '',
         important: false,
         separator: ':',
       }
     }

3. Move your options settings to the top-level.

   The advanced options have been moved to the top-level of the config file instead of being nested under the redundant options key.

   After making this change, your config file should look like this:

     let defaultConfig = require('tailwindcss/defaultConfig')()
   
     let colors = {
       // ...
     }
   
     module.exports = {
   +   prefix: '',
   +   important: false,
   +   separator: ':',
       theme: {
         // ...
       },
       variants: {
         appearance: ['responsive'],
         backgroundAttachment: ['responsive'],
         backgroundColors: ['responsive', 'hover', 'focus'],
         // ...
         zIndex: ['responsive'],
       },
       plugins: [
         require('tailwindcss/plugins/container')({
           // ...
         }),
       ],
   -   options: {
   -     prefix: '',
   -     important: false,
   -     separator: ':',
   -   }
     }

4. Update the sections under theme to their new names.

   As part of an effort to make the naming in the config file more consistent, many of the sections under theme have been renamed.

   These are the sections that need to be updated:

   Old	New
   fonts	`...

v0.7.4

• Update our PostCSS related dependencies (#618)
• Fix bug where class names containing a . character had the responsive prefix added in the wrong place (#613)

v0.7.3

• Update Normalize to v8.0.1 (#588)

v0.7.2

• Add --no-autoprefixer option to CLI build command (#584)

v0.7.1

• Update autoprefixer dependency (fixes #583)