Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Snyk] Upgrade tailwindcss from 1.1.4 to 1.2.0 #3

Merged
merged 1 commit into from
Apr 5, 2020

Conversation

snyk-bot
Copy link
Contributor

@snyk-bot snyk-bot commented Apr 5, 2020

Snyk has created this PR to upgrade tailwindcss from 1.1.4 to 1.2.0.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
  • The recommended version is 10 versions ahead of your current version.
  • The recommended version was released 2 months ago, on 2020-02-05.
Release notes
Package name: tailwindcss
  • 1.2.0 - 2020-02-05

    Tailwind CSS v1.2.0

    This is probably the most exciting feature release in the history of Tailwind, so put on your seat belts.

    New Features

    CSS Transition support (#1273)

    Tailwind now includes utilities for setting the transition-property, transition-duration, and transition-timing-function properties.

    <button class="opacity-50 hover:opacity-100 transition-opacity duration-100 ease-out">...</button>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .transition-{property}</span>
    transitionProperty<span class="pl-k">:</span> {
      none<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>none<span class="pl-pds">'</span></span>,
      all<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>all<span class="pl-pds">'</span></span>,
      default<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>background-color, border-color, color, fill, stroke, opacity, box-shadow, transform<span class="pl-pds">'</span></span>,
      colors<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>background-color, border-color, color, fill, stroke<span class="pl-pds">'</span></span>,
      opacity<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>opacity<span class="pl-pds">'</span></span>,
      shadow<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>box-shadow<span class="pl-pds">'</span></span>,
      transform<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>transform<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .ease-{timingFunction}</span>
    transitionTimingFunction<span class="pl-k">:</span> {
      linear<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>linear<span class="pl-pds">'</span></span>,
      in<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>cubic-bezier(0.4, 0, 1, 1)<span class="pl-pds">'</span></span>,
      out<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>cubic-bezier(0, 0, 0.2, 1)<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>in-out<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>cubic-bezier(0.4, 0, 0.2, 1)<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .duration-{duration}</span>
    transitionDuration<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>75<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>75ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>100<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>100ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>150<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>150ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>200<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>200ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>300<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>300ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>500<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>500ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>700<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>700ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1000<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1000ms<span class="pl-pds">'</span></span>,
    },
    

    }
    }

    For more information, check out the documentation.

    CSS Transform support (#1272)

    Tailwind now includes utilities for scaling, rotating, translating, and skewing elements.

    <span class="transform scale-150 rotate-45 translate-x-full origin-center"></span>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .origin-{origin}</span>
    transformOrigin<span class="pl-k">:</span> {
      center<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>center<span class="pl-pds">'</span></span>,
      top<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>top<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>top-right<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>top right<span class="pl-pds">'</span></span>,
      right<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>right<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>bottom-right<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>bottom right<span class="pl-pds">'</span></span>,
      bottom<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>bottom<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>bottom-left<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>bottom left<span class="pl-pds">'</span></span>,
      left<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>left<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>top-left<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>top left<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .scale-{scale}</span>
    <span class="pl-c"><span class="pl-c">//</span> .scale-x-{scale}</span>
    <span class="pl-c"><span class="pl-c">//</span> .scale-y-{scale}</span>
    scale<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>50<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>75<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.75<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>90<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.9<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>95<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.95<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>100<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>105<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.05<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>110<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>125<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.25<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>150<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.5<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .rotate-{angle}</span>
    rotate<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>-180<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-180deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>-90<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-90deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>-45<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-45deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>45<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>45deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>90<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>90deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>180<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>180deg<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .translate-x-{distance}</span>
    <span class="pl-c"><span class="pl-c">//</span> .translate-y-{distance}</span>
    <span class="pl-c"><span class="pl-c">//</span> .-translate-x-{distance}</span>
    <span class="pl-c"><span class="pl-c">//</span> .-translate-y-{distance}</span>
    <span class="pl-en">translate</span><span class="pl-k">:</span> (<span class="pl-smi">theme</span>, { negative }) <span class="pl-k">=&gt;</span> ({
      <span class="pl-k">...</span><span class="pl-en">theme</span>(<span class="pl-s"><span class="pl-pds">'</span>spacing<span class="pl-pds">'</span></span>),
      <span class="pl-k">...</span><span class="pl-en">negative</span>(<span class="pl-en">theme</span>(<span class="pl-s"><span class="pl-pds">'</span>spacing<span class="pl-pds">'</span></span>)),
      <span class="pl-s"><span class="pl-pds">'</span>-full<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-100%<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>-1/2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-50%<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1/2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>50%<span class="pl-pds">'</span></span>,
      full<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>100%<span class="pl-pds">'</span></span>,
    }),
    
    <span class="pl-c"><span class="pl-c">//</span> .skew-x-{amount}</span>
    <span class="pl-c"><span class="pl-c">//</span> .skew-y-{amount}</span>
    skew<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>-12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-12deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>-6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-6deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>-3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-3deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>3deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>6deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>12deg<span class="pl-pds">'</span></span>,
    },
    

    }
    }

    One notable difference in how this works vs. other utilities in Tailwind is that the transform utility acts sort of like a "toggle" — you need to add that class to "enable" transforms on an element but on its own it doesn't actually apply any transforms.

    You apply the actual transforms by stacking additional utilities for the types of transforms you'd like to apply, like scale-150 to scale an element to 150% of its size, or rotate-45 to rotate it 45 degrees.

    To make it possible to compose multiple transforms like this, we've implemented this feature using CSS custom properties, which means transforms in Tailwind are not supported in IE11. If you need to support IE11 and would like to use transforms in your project, you'll need to write custom CSS as you would have in earlier versions of Tailwind.

    For more information, check out the documentation.

    CSS Grid utilities (#1274)

    Tailwind now includes utilities for CSS Grid Layout.

    <div class="grid grid-cols-2 lg:grid-cols-8 gap-6">
      <div class="col-span-1 lg:col-span-3"></div>
      <div class="col-span-1 lg:col-span-3"></div>
      <div class="col-start-1 col-end-3 lg:col-start-4 lg:col-end-8"></div>
      <div class="col-span-1 col-start-1 lg:col-span-4 lg:col-start-2"></div>
      <div class="col-span-1 col-end-3 lg:col-span-6 lg:col-end-9"></div>
    </div>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .gap-{spacing}, .row-gap-{spacing}, .col-gap-{spacing}</span>
    <span class="pl-en">gap</span><span class="pl-k">:</span> <span class="pl-smi">theme</span> <span class="pl-k">=&gt;</span> <span class="pl-en">theme</span>(<span class="pl-s"><span class="pl-pds">'</span>spacing<span class="pl-pds">'</span></span>),
    
    <span class="pl-c"><span class="pl-c">//</span> .grid-cols-{cols}</span>
    gridTemplateColumns<span class="pl-k">:</span> {
      none<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>none<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(1, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(2, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(3, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(4, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(5, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(6, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(7, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(8, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(9, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(10, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(11, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(12, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .col-{value}</span>
    gridColumn<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 1 / span 1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 2 / span 2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 3 / span 3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 4 / span 4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 5 / span 5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 6 / span 6<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 7 / span 7<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 8 / span 8<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 9 / span 9<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 10 / span 10<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-11<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 11 / span 11<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 12 / span 12<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .col-start-{value}</span>
    gridColumnStart<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>13<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>13<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .col-end-{value}</span>
    gridColumnEnd<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>13<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>13<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .grid-rows-{rows}</span>
    gridTemplateRows<span class="pl-k">:</span> {
      none<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>none<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(1, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(2, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(3, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(4, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(5, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(6, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .row-{value}</span>
    gridRow<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 1 / span 1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 2 / span 2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 3 / span 3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 4 / span 4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 5 / span 5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 6 / span 6<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .row-start-{value}</span>
    gridRowStart<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .row-end-{value}</span>
    gridRowEnd<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span>,
    },
    

    }
    }

    By default we ship the necessary utilities to construct grids with 1–12 explicit columns and 1-6 explicit rows and place elements anywhere in that grid.

    Note that the approach we've taken to supporting CSS Grid is not compatible with IE11. For building grid layouts in older browsers, we recommend using Flexbox instead of CSS Grid.

    For more information, check out the documentation.

    Added max-w-{screen} utilities (#1284)

    Tailwind's default max-width scale now includes values to match your breakpoints, taking the form max-w-screen-{breakpointName}.

    <div class="max-w-screen-lg">...</div>

    These are useful when you need behavior similar to the container class but only for certain sizes.

    Added max-w-none utility (#1283)

    Tailwind's default max-width scale now includes a none value for removing any max-width constraint an element might have.

    <div class="max-w-md lg:max-w-none">...</div>

    Added rounded-md utility (#1281)

    Tailwind's default border-radius scale now includes an md value for giving an element a 6px border radius.

    <div class="rounded-md"></div>

    Added shadow-sm utility (#1280)

    Tailwind's default box-shadow scale now includes an sm value for giving an element a very subtle small shadow — great for giving buttons or inputs a bit of depth without being super in-your-face.

    <div class="shadow-sm"></div>

    For more information, check out the pull request.

    Added shadow-xs utility (#1333)

    Tailwind's default box-shadow scale now includes an xs value for giving an element a very subtle outline shadow, very useful for stacking with other shadows when you need a tiny bit of extra distinction from the background.

    <div class="shadow-md rounded-md">
      <div class="shadow-xs rounded-md">
        <!-- ... -->
      </div>
    </div>

    For more information, check out the pull request.

    Added stroke-width utilities (#1094)

    Tailwind now includes utilities for controlling the stroke-width property of SVG elements.

    <svg class="stroke-2">...</svg>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .stroke-{width}</span>
    strokeWidth<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
    }
    

    }
    }

    For more information, check out the documentation.

    Added fixed line-height utilities (#1362)

    Tailwind now includes a sensible set of fixed-value line-height utilities in addition to the existing relative line-height utilities.

    <svg class="leading-5">...</svg>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .leading-{size}</span>
    lineHeight<span class="pl-k">:</span> {
      none<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      tight<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.25<span class="pl-pds">'</span></span>,
      snug<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.375<span class="pl-pds">'</span></span>,
      normal<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.5<span class="pl-pds">'</span></span>,
      relaxed<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.625<span class="pl-pds">'</span></span>,
      loose<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.75rem<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1rem<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.25rem<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.5rem<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.75rem<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2rem<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2.25rem<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2.5rem<span class="pl-pds">'</span></span>,
    }
    

    }
    }

    For more information, check out the documentation.

    Added additional display utilities for table elements (#954)

    Tailwind now includes a complete set of display utilities for table elements.

    <div class="table-header-group">...</div>

    We've added table-caption, table-column, table-column-group, table-footer-group, table-header-group, and table-row-group.

    Added box-sizing utilities (#1031)

    Tailwind now includes box-border and box-content utilities for setting the box-sizing property of an element.

    <div class="box-content">...</div>

    These can be useful when working with third party libraries that rely on the default browser value of box-sizing: content-box, which we override in our base styles.

    For more information, check out the documentation.

    Added clear utilities (#1051)

    Tailwind now includes clear-left, clear-right, and clear-both utilities for clearing floats using the clear property.

    <div class="clear-left">...</div>

    For more information, check out the documentation.

    Config file dependencies are now watchable (#1072)

    If you are require-ing other modules inside your tailwind.config.js file, those files will now be automatically watched for changes when running a webpack/PostCSS watcher.

    Previously, you'd have to restart your watcher any time you changed those files. Now those changes will be noticed automatically and your CSS will just rebuild as expected — hurray!

    For more information, check out the pull request.

    Added new plugin and plugin.withOptions APIs (#1268)

    In prior versions of Tailwind, plugins were just simple anonymous functions:

    // my-plugin.js
    module.exports = function ({ addUtilities, variants, theme }) {
      // ...
    }

    While this approach still works great and is 100% supported, Tailwind v1.2 adds two new official APIs for creating plugins that allow us to support some helpful new features.

    The new tailwindcss/plugin module exports a function that you can use to create a plugin like so:

    // my-plugin.js
    const plugin = require('tailwindcss/plugin')
    

    module.exports = plugin(function ({ addUtilities, variants, theme }) {
    // ...
    })

    You can also use plugin.withOptions to create a plugin that accepts some additional user configuration right in the plugins section of your config:

    // my-plugin.js
    const plugin = require('tailwindcss/plugin')
    

    module.exports = plugin.withOptions(function (options) {
    return function ({ addUtilities, variants, theme }) {
    // ...
    }
    })

    Previously if you designed a plugin this way, users would have to make sure to invoke your plugin in their config, even if they had no custom configuration to provide:

    // tailwind.config.js
    module.exports = {
      plugins: [
        require('plugin-with-no-options'),
        require('plugin-that-has-options')(),
      ]
    }

    Now Tailwind is smart enough to invoke the function on the user's behalf, so if they don't want to provide any options, they can just require the plugin:

    // tailwind.config.js
    module.exports = {
      plugins: [
        require('plugin-with-no-options'),
        require('plugin-that-has-options'),
      ]
    }

    Allow plugins to extend the user's config (#1162)

    Plugins can now extend the user's config file by providing their own configuration object as a second argument to the new plugin API:

    // my-plugin.js
    const plugin = require('tailwindcss/plugin')
    

    module.exports = plugin(function ({ addUtilities, variants, theme }) {
    // ...
    }, {
    theme: {
    myPluginName: {...},
    },
    variants: {
    myPluginName: ['responsive'],
    }
    })

    This also works using the plugin.withOptions API, just pass a function that accepts your options and returns your config:

    // my-plugin.js
    const plugin = require('tailwindcss/plugin')
    

    module.exports = plugin.withOptions(function (options) {
    return function ({ addUtilities, variants, theme }) {
    // ...
    }
    }, function (options) {
    return {
    theme: {
    myPluginName: {...},
    },
    variants: {
    myPluginName: ['responsive'],
    }
    }
    })

    By providing your default theme values/variants this way, users can use Tailwind's extend feature to extend your defaults just like they can with core plugins.

  • 1.2.0-canary.8 - 2020-02-05
    • Add additional fixed-size line-height utilities (#1362)
  • 1.2.0-canary.7 - 2020-02-03
    • Remove Inter from font-sans, plan to add later under new class
  • 1.2.0-canary.6 - 2020-02-03
    • Add system-ui to default font stack (#1326)
    • Add shadow-xs, increase shadow-sm alpha to 0.05 (#1333)
    • Support import syntax even without postcss-import (#1336)
    • Alias tailwind bin to tailwindcss (e988185)
    • Add fill/stroke to transition-colors (#1351)
    • Add transition-shadow, add box-shadow to default transition (#1352)
    • Combine gap/columnGap/rowGap (#1353)
    • Add grid row utilities (#1355)
    • Add skew utilities (#1356)
    • Use font-sans as default font (#1357)
  • 1.2.0-canary.5 - 2020-01-08
    • Adds missing dependency resolve which is required for making config dependencies watchable
  • 1.2.0-canary.4 - 2020-01-08

    Please note: This is a pre-release, which means (although I'm not planning on it) these new features could change before the stable version of 1.2.0 is released.

    Tailwind CSS v1.2.0-canary.4

    This is probably the most exciting feature release in the history of Tailwind, so put on your seat belts.

    Installation

    While v1.2.0 is in pre-release, install it using:

    # Using npm
    npm install tailwindcss@canary
    

    # Using yarn
    yarn add tailwindcss@canary

    New Features

    CSS Transition support (#1273)

    Tailwind now includes utilities for setting the transition-property, transition-duration, and transition-timing-function properties.

    <button class="opacity-50 hover:opacity-100 transition-opacity duration-100 ease-out">...</button>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .transition-{property}</span>
    transitionProperty<span class="pl-k">:</span> {
      none<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>none<span class="pl-pds">'</span></span>,
      all<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>all<span class="pl-pds">'</span></span>,
      default<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>background-color, border-color, color, opacity, transform<span class="pl-pds">'</span></span>,
      colors<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>background-color, border-color, color<span class="pl-pds">'</span></span>,
      opacity<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>opacity<span class="pl-pds">'</span></span>,
      transform<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>transform<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .ease-{timingFunction}</span>
    transitionTimingFunction<span class="pl-k">:</span> {
      linear<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>linear<span class="pl-pds">'</span></span>,
      in<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>cubic-bezier(0.4, 0, 1, 1)<span class="pl-pds">'</span></span>,
      out<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>cubic-bezier(0, 0, 0.2, 1)<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>in-out<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>cubic-bezier(0.4, 0, 0.2, 1)<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .duration-{duration}</span>
    transitionDuration<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>75<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>75ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>100<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>100ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>150<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>150ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>200<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>200ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>300<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>300ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>500<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>500ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>700<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>700ms<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1000<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1000ms<span class="pl-pds">'</span></span>,
    },
    

    }
    }

    For more information, check out the pull request.

    CSS Transform support (#1272)

    Tailwind now includes utilities for scaling, rotating, translating, and skewing elements.

    <span class="transform scale-150 rotate-45 translate-x-full origin-center"></span>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .origin-{origin}</span>
    transformOrigin<span class="pl-k">:</span> {
      center<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>center<span class="pl-pds">'</span></span>,
      top<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>top<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>top-right<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>top right<span class="pl-pds">'</span></span>,
      right<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>right<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>bottom-right<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>bottom right<span class="pl-pds">'</span></span>,
      bottom<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>bottom<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>bottom-left<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>bottom left<span class="pl-pds">'</span></span>,
      left<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>left<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>top-left<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>top left<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .scale-{scale}</span>
    <span class="pl-c"><span class="pl-c">//</span> .scale-x-{scale}</span>
    <span class="pl-c"><span class="pl-c">//</span> .scale-y-{scale}</span>
    scale<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>50<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>75<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.75<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>90<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.9<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>95<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.95<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>100<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>105<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.05<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>110<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>125<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.25<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>150<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1.5<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .rotate-{angle}</span>
    rotate<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>-180<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-180deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>-90<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-90deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>-45<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-45deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>45<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>45deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>90<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>90deg<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>180<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>180deg<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .translate-{distance}</span>
    <span class="pl-c"><span class="pl-c">//</span> .translate-x-{distance}</span>
    <span class="pl-c"><span class="pl-c">//</span> .translate-y-{distance}</span>
    <span class="pl-c"><span class="pl-c">//</span> .-translate-{distance}</span>
    <span class="pl-c"><span class="pl-c">//</span> .-translate-x-{distance}</span>
    <span class="pl-c"><span class="pl-c">//</span> .-translate-y-{distance}</span>
    <span class="pl-en">translate</span><span class="pl-k">:</span> (<span class="pl-smi">theme</span>, { negative }) <span class="pl-k">=&gt;</span> ({
      <span class="pl-k">...</span><span class="pl-en">theme</span>(<span class="pl-s"><span class="pl-pds">'</span>spacing<span class="pl-pds">'</span></span>),
      <span class="pl-k">...</span><span class="pl-en">negative</span>(<span class="pl-en">theme</span>(<span class="pl-s"><span class="pl-pds">'</span>spacing<span class="pl-pds">'</span></span>)),
      <span class="pl-s"><span class="pl-pds">'</span>-full<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-100%<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>-1/2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>-50%<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1/2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>50%<span class="pl-pds">'</span></span>,
      full<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>100%<span class="pl-pds">'</span></span>,
    }),
    
    <span class="pl-c"><span class="pl-c">//</span> .skew-x-{amount}</span>
    <span class="pl-c"><span class="pl-c">//</span> .skew-y-{amount}</span>
    skew<span class="pl-k">:</span> {},
    

    }
    }

    One notable difference in how this works vs. other utilities in Tailwind is that the transform utility acts sort of like a "toggle" — you need to add that class to "enable" transforms on an element but on its own it doesn't actually apply any transforms.

    You apply the actual transforms by stacking additional utilities for the types of transforms you'd like to apply, like scale-150 to scale an element to 150% of its size, or rotate-45 to rotate it 45 degrees.

    Note that while we have provided sensible defaults for scale, rotate, and translate, we do not include any default values for skew. If you'd like to add skew utilities to your project, add the values you need under the skew key in your theme.

    To make it possible to compose multiple transforms like this, we've implemented this feature using CSS custom properties, which means transforms in Tailwind are not supported in IE11. If you need to support IE11 and would like to use transforms in your project, you'll need to write custom CSS as you would have in earlier versions of Tailwind.

    For more information, check out the pull request.

    CSS Grid utilities (#1274)

    Tailwind now includes utilities for CSS Grid Layout.

    <div class="grid grid-cols-2 lg:grid-cols-8 gap-6">
      <div class="col-span-1 lg:col-span-3"></div>
      <div class="col-span-1 lg:col-span-3"></div>
      <div class="col-start-1 col-end-3 lg:col-start-4 lg:col-end-8"></div>
      <div class="col-span-1 col-start-1 lg:col-span-4 lg:col-start-2"></div>
      <div class="col-span-1 col-end-3 lg:col-span-6 lg:col-end-9"></div>
    </div>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .gap-{spacing}</span>
    <span class="pl-en">gap</span><span class="pl-k">:</span> <span class="pl-smi">theme</span> <span class="pl-k">=&gt;</span> <span class="pl-en">theme</span>(<span class="pl-s"><span class="pl-pds">'</span>spacing<span class="pl-pds">'</span></span>),
    
    <span class="pl-c"><span class="pl-c">//</span> .row-gap-{spacing}</span>
    rowGap<span class="pl-k">:</span> {},
    
    <span class="pl-c"><span class="pl-c">//</span> .col-gap-{spacing}</span>
    columnGap<span class="pl-k">:</span> {},
    
    <span class="pl-c"><span class="pl-c">//</span> .grid-cols-{cols}</span>
    gridTemplateColumns<span class="pl-k">:</span> {
      none<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>none<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(1, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(2, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(3, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(4, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(5, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(6, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(7, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(8, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(9, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(10, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(11, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>repeat(12, minmax(0, 1fr))<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .col-{value}</span>
    gridColumn<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 1 / span 1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 2 / span 2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 3 / span 3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 4 / span 4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 5 / span 5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 6 / span 6<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 7 / span 7<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 8 / span 8<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 9 / span 9<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 10 / span 10<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-11<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 11 / span 11<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>span-12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>span 12 / span 12<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .col-start-{value}</span>
    gridColumnStart<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>13<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>13<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .col-end-{value}</span>
    gridColumnEnd<span class="pl-k">:</span> {
      auto<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>auto<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>3<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>4<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>5<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>6<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>7<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>8<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>9<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>10<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>11<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>12<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>13<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>13<span class="pl-pds">'</span></span>,
    },
    
    <span class="pl-c"><span class="pl-c">//</span> .grid-rows-{rows}</span>
    gridTemplateRows<span class="pl-k">:</span> {},
    
    <span class="pl-c"><span class="pl-c">//</span> .row-{value}</span>
    gridRow<span class="pl-k">:</span> {},
    
    <span class="pl-c"><span class="pl-c">//</span> .row-start-{value}</span>
    gridRowStart<span class="pl-k">:</span> {},
    
    <span class="pl-c"><span class="pl-c">//</span> .row-end-{value}</span>
    gridRowEnd<span class="pl-k">:</span> {},
    

    }
    }

    By default we ship the necessary utilities to construct grids with 1–12 columns and place elements anywhere in that grid, but we don't include any default utilities for controlling rows or row placement. Those utilities are supported out of the box though, you just need to add the values you need to your config file.

    Note that the approach we've taken to supporting CSS Grid is not compatible with IE11. For building grid layouts in older browsers, we recommend using Flexbox instead of CSS Grid.

    For more information, check out the pull request.

    New max-w-{screen} utilities (#1284)

    Tailwind's default max-width scale now includes values to match your breakpoints, taking the form max-w-screen-{breakpointName}.

    <div class="max-w-screen-lg">...</div>

    These are useful when you need behavior similar to the container class but only for certain sizes.

    For more information, check out the pull request.

    New max-w-none utility (#1283)

    Tailwind's default max-width scale now includes a none value for removing any max-width constraint an element might have.

    <div class="max-w-md lg:max-w-none">...</div>

    For more information, check out the pull request.

    Added "Inter" to the default sans-serif font stack (#1275)

    Tailwind now includes Inter as the first font family in our default sans serif font stack.

    Inter is a beautiful, free, open source font created by Rasmus Andersson carefully crafted for interface design. It has a similar feel to Apple's San Francisco font, but is licensed in a way that lets you use it on all operating systems.

    If you care about your end users seeing the same font no matter which operating system they are running (something you don't get when using the system font stack), Inter is without a doubt the first font I would recommend. I like to think of it as "the universal system font".

    This change won't affect how your site looks at all if you aren't serving Inter to your users, but now if you do want to use Inter, all you need to do is load it on your site from the CDN:

    <link href="https://rsms.me/inter/inter.css" rel="stylesheet">

    This change only adds "Inter" to the font stack, it does not actually automatically import/load the font files. You can choose to serve them yourself or use a CDN link like the one mentioned above.

    For users who want to continue using the system font, you don't have to do anything — the browser will continue to render the system font stack in the absence of the Inter font files.

    For more information, check out the pull request.

    Added rounded-md utility (#1281)

    Tailwind's default border-radius scale now includes an md value for giving an element a 6px border radius.

    <div class="rounded-md"></div>

    For more information, check out the pull request.

    Added shadow-sm utility (#1280)

    Tailwind's default box-shadow scale now includes an sm value for giving an element a very subtle small shadow — great for giving buttons or inputs a bit of depth without being super in-your-face.

    <div class="shadow-sm"></div>

    For more information, check out the pull request.

    Added stroke-width utilities (#1094)

    Tailwind now includes utilities for controlling the stroke-width property of SVG elements.

    <svg class="stroke-2">...</svg>
    Expand to see the default values for these utilities
    // tailwind.config.js
    module.exports = {
      theme: {
    
    <span class="pl-c"><span class="pl-c">//</span> .stroke-{width}</span>
    strokeWidth<span class="pl-k">:</span> {
      <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>0<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>1<span class="pl-pds">'</span></span>,
      <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>2<span class="pl-pds">'</span></span>,
    }
    

    }
    }

    For more information, check out the pull request.

    Added additional display utilities for table elements (#954)

    Tailwind now includes a complete set of display utilities for table elements.

    <div class="table-header-group">...</div>

    We've added table-caption, table-column, table-column-group, table-footer-group, table-header-group, and table-row-group.

    For more information, check out the pull request.

    Added box-sizing utilities (#1031)

    Tailwind now includes box-border and box-content utilities for setting the box-sizing property of an element.

    <div class="box-content">...</div>

    These can be useful when working with third party libraries that rely on the default browser value of box-sizing: content-box which we override in our base styles (Google Maps is a good example).

    For more information, check out the pull request.

    Added clear utilities (#1051)

    Tailwind now includes clear-left, clear-right, and clear-both utilities for clearing floats using the clear property.

    <div class="clear-left">...</div>

    For more information, check out the pull request.

    Config file dependencies are now watchable (#1072)

    If you are require-ing other modules inside your tailwind.config.js file, those files will now be automatically watched for changes when running a webpack/PostCSS watcher.

    Previously, you'd have to restart your watcher any time you changed those files. Now those changes will be noticed automatically and your CSS will just rebuild as expected — hurray!

    For more information, check out the pull request.

    Added new plugin and plugin.withOptions APIs (#1268)

    In prior versions of Tailwind, plugins were just simple anonymous functions:

    // my-plugin.js
    module.exports = function ({ addUtilities, variants, theme }) {
      // ...
    }

    While this approach still works great and is 100% supported, Tailwind v1.2 adds two new official APIs for creating plugins that allow us to support some helpful new features.

    The new tailwindcss/plugin module exports a function that you can use to create a plugin like so:

    // my-plugin.js
    const plugin = require('tailwindcss/plugin')
    

    module.exports = plugin(function ({ addUtilities, variants, theme }) {
    // ...
    })

    You can also use plugin.withOptions to create a plugin that accepts some additional user configuration right in the plugins section of your config:

    // my-plugin.js
    const plugin = require('tailwindcss/plugin')
    

    module.exports = plugin.withOptions(function (options) {
    return function ({ addUtilities, variants, theme }) {
    // ...
    }
    })

    Previously if you designed a plugin this way, users would have to make sure to invoke your plugin in their config, even if they had no custom configuration to provide:

    // tailwind.config.js
    module.exports = {
      plugins: [
        require('plugin-with-no-options'),
        require('plugin-that-has-options')(),
      ]
    }

    Now Tailwind is smart enough to invoke the function on the user's behalf, so if they don't want to provide any options, they can just require the plugin:

    // tailwind.config.js
    module.exports = {
      plugins: [
        require('plugin-with-no-options'),
        require('plugin-that-has-options'),
      ]
    }

    Allow plugins to extend the user's config (#1162)

    Plugins can now extend the user's config file by providing their own configuration object as a second argument to the new plugin API:

    // my-plugin.js
    const plugin = require('tailwindcss/plugin')
    

    module.exports = plugin(function ({ addUtilities, variants, theme }) {
    // ...
    }, {
    theme: {
    myPluginName: {...},
    },
    variants: {
    myPluginName: ['responsive'],
    }
    })

    This also works using the plugin.withOptions API, just pass a function that accepts your options and returns your config:

    // my-plugin.js
    const plugin = require('tailwindcss/plugin')
    

    module.exports = plugin.withOptions(function (options) {
    return function ({ addUtilities, variants, theme }) {
    // ...
    }
    }, function (options) {
    return {
    theme: {
    myPluginName: {...},
    },
    variants: {
    myPluginName: ['responsive'],
    }
    }
    })

    By providing your default theme values/variants this way, users can use Tailwind's extend feature to extend your defaults just like they can with core plugins.

  • 1.2.0-canary.3 - 2020-01-08

    1.2.0-canary.3

  • 1.2.0-canary.2 - 2019-12-20
    • Add new plugin and plugin.withOptions APIs for plugin developers (#1268)
  • 1.2.0-canary.1 - 2019-10-22
    • Don't watch node_modules files for changes, fixed significant build performance regression in v1.2.0-canary.0 (#1179)
  • 1.2.0-canary.0 - 2019-10-14
  • 1.1.4 - 2019-11-25
    • Fixes a bug where the .group class was not receiving the user's configured prefix when using the prefix option (#1216).

      Note: Although this is a bugfix it could affect your site if you were working around the bug in your own code by not prefixing the .group class. I'm sorry 😞

from tailwindcss GitHub release notes
Commit messages
Package name: tailwindcss
  • 61e5ac5 1.2.0
  • 834cee4 1.2.0-canary.8
  • 978a688 Merge pull request #1362 from tailwindcss/fixed-line-height-values
  • 9b89683 Add sensible set of fixed line-height utilities
  • 86e8e38 Remove unused config properties
  • 0ea9eba 1.2.0-canary.7
  • 75e7c10 Merge pull request #1358 from tailwindcss/remove-inter
  • 8767f6e Don't include Inter in default font stack
  • ce6ad1e 1.2.0-canary.6
  • 8a95f03 Merge pull request #1357 from tailwindcss/use-font-sans-by-default
  • bdbec26 Use font-sans as the default font, not the system font
  • 09e7584 Update Jest
  • 7815e01 Update fixtures, add system-ui to `sans` font stack as well
  • f07475e Merge branch 'patch-1' of git://github.com/argyleink/tailwindcss into argyleink-patch-1
  • 3dc124a Stop running tests on node 8 so we can update to Jest 25
  • b3c3d5c Merge pull request #1356 from tailwindcss/add-default-skews
  • 36dd50e Add some default skew values
  • 0bd59f5 Merge pull request #1355 from tailwindcss/add-grid-row-defaults
  • 3efa8e1 Add some default values for grid row utilities, confusing to have none
  • e7c6480 Move build script to scripts
  • a2a11ac Add script for rebuilding fixtures
  • 0bcbfd4 Merge pull request #1353 from tailwindcss/combine-gap-plugins
  • 677e5a7 Combine gap, columnGap, and rowGap plugins into just gap, like margin/padding/inset
  • 12c4c7d Merge pull request #1352 from tailwindcss/transition-shadow

Compare


Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

@the94air the94air merged commit 5022009 into master Apr 5, 2020
@the94air the94air deleted the snyk-upgrade-2decf893f6bd8131950ac2eba9afeebb branch May 8, 2020 19:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants