[Snyk] Upgrade tailwindcss from 1.2.0 to 1.3.4 #12

snyk-bot · 2020-05-14T00:05:17Z

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

✨What is Merge Advice?

We check thousands of dependency upgrade pull requests and CI tests every day to see which upgrades were successfully merged. After crunching this data, we give a recommendation on how safe we think the change is for you to merge without causing issues. Learn more, and share your feedback to help improve this feature. 🙏

ℹ️ 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 5 versions ahead of your current version.
The recommended version was released 22 days ago, on 2020-04-21.

Release notes

Package name: tailwindcss

1.3.4 - 2020-04-21
- Fix bug where divide-{x/y}-0 utilities didn't work due to missing unit in calc call
1.3.3 - 2020-04-21
- Fix bug where the divide-x utilities were not being applied correctly due to referencing --divide-y-reverse instead of --divide-x-reverse
1.3.2 - 2020-04-21
- Add forgotten responsive variants for space, divideWidth, and divideColor utilities
1.3.1 - 2020-04-21
- Fix bug where the space-x utilities were not being applied correctly due to referencing --space-y-reverse instead of --space-x-reverse
1.3.0 - 2020-04-21
Tailwind CSS v1.3.0

Holy crap a new Tailwind CSS release! We've got a few new goodies in this one, and I've made sure to put the most exciting ones at the top 🚀

New Features
New space and divide layout utilities (#1584, #1594)

Prior to Tailwind v1.3, if you wanted to add some space or a border between elements, you had to manually add the necessary margin/border to all but one of the children:
```

<ul>
  <li>One</li>
  <li class="mt-4">Two</li>
  <li class="mt-4">Three</li>
</ul>
```
Tailwind v1.3 introduces new space-{x/y}-{n}, divide-{x/y}-{n}, and divide-{color} utilities for controlling this at the parent level instead, simplifying this common pattern into something concise and declarative that doesn't require all of that annoying duplication:
```

<ul class="space-y-4">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```
The space-x-{n} utilities add a left margin to all but the first element, and the space-y-{n} utilities add a top margin to all but the first element:
```

<ul class="flex space-x-2">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>


<ul class="space-y-4">

<li>One</li>

<li>Two</li>

<li>Three</li>

</ul>
```
The space utilities inherit their configuration from the global spacing configuration by default, and include negative variations like -space-x-2 to create overlapping effects.

The divide-x-{n} utilities add a left border to all but the first element, and the divide-y-{n} utilities add a top border to all but the first element:
```

<ul class="flex divide-x">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>


<ul class="divide-y">

<li>One</li>

<li>Two</li>

<li>Three</li>

</ul>
```
The divide utilities inherit their configuration from the borderWidth configuration, and support the default keyword (set to 1px out of the box, like with borderWidth) so you can use divide-y instead of divide-y-1.

The divide-{color} utilities are used to set the color of the dividing borders:
```

<ul class="divide-y divide-blue-500">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```
We've also included space-{x/y}-reverse and divide-{x/y}-reverse utilities which can be useful if you are reversing the direction of items in a container using either flex-row-reverse or flex-col-reverse. These utilities swap left margins for right margins, top margins for bottom margins, left borders for right borders, and top borders for bottom borders to account for the items being in reverse order:
```

<ul class="flex flex-row-reverse space-x-2 space-x-reverse">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```
There are a couple limitations of our implementation that are worth pointing out:
- They break down if your items wrap, you'll want to do something complicated with negative margins if you need to handle this
- They break down if you start manually changing the order of things using the order property
Despite these limitations, I think you'll still find these incredibly useful. Eventually gap will have universal support in flexbox layouts and we can all rejoice.

All of these utilities include responsive variants by default, and their values and variants can be customized using the space, divideWidth, and divideColor configuration keys respectively.

New transition-delay utilities (#1462)

Tailwind v1.3 introduces new delay-{amount} utilities for the transition-delay property:
```
<div class="transition ease-in-out duration-500 delay-1000">
  
</div>
```
We include the same values we do for the duration-{amount} utilities and generate responsive variants by default:
```
// tailwind.config.js
module.exports = {
  theme: {
    // ...
    transitionDelay: {
      '75': '75ms',
      '100': '100ms',
      '150': '150ms',
      '200': '200ms',
      '300': '300ms',
      '500': '500ms',
      '700': '700ms',
      '1000': '1000ms',
    },
  },
  variants: {
    // ...
    transitionDelay: ['responsive'],
  },
  // ...
}
```
New group-focus variant (#1577)

We've added a new group-focus variant that works just like the existing group-hover variant, but for focus states.

This is useful when you want to add custom focus style to a button or link that has some nested child you want to style in a specific way, for example, changing the color of an icon inside of a button when the button is focused:
```
<button class="group text-gray-600 focus:bg-gray-100 focus:text-gray-700">
  <svg class="h-6 w-6 text-gray-400 group-focus:text-gray-500">
    
  </svg>
  Submit
</button>
```
This variant not enabled for any utilities by default, but can be enabled in the variants section of your config file.

Support for specifying a default line-height for each font-size utility (#1532)

A common pattern we've run into in our own Tailwind projects is repeatedly pairing a font-size utility with a particular line-height utility, for example always using text-sm with leading-5.

Tailwind v1.3 now lets you specify a default line-height for each font-size utility in your config file, using a tuple of the form [fontSize, lineHeight]:
```
// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      // Will embed no line-height value
      sm: '12px',
  <span class="pl-c">// Will use `font-size: 16px` and `line-height: 24px`</span>
  <span class="pl-c1">md</span>: <span class="pl-kos">[</span><span class="pl-s">'16px'</span><span class="pl-kos">,</span> <span class="pl-s">'24px'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

},

}
```
```
.text-sm {
  font-size: 12px;
}
.text-md {

font-size: 16px;

line-height: 24px;

}
```
The font-size utilities are generated before the line-height utilities in the final CSS, so you can still override the line-height for a particular font-size by simply adding a leading-{size} utility:
```

<div class="text-md leading-none"></div>
```
We haven't changed the default config to include default line-heights as that would be a breaking change, but this is a feature we will likely take advantage of in Tailwind 2.0 sometime in the future.

Support for breakpoint-specific padding for container class (#1398)

Prior to v1.3, you could configure the container class to have built-in horizontal padding like so:
```
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}
```
Tailwind v1.3 enhances this functionality to allow you to specify a different amount of padding for each breakpoint:
```
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        default: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  },
}
```
Added current to the default color palette (#1438)

The default color palette now includes current for currentColor, which simplifies some situations like creating buttons where the border color should match the text color:
```

<button
  class="text-gray-500 hover:text-gray-700 focus:text-gray-700 border border-gray-500 hover:border-gray-700 focus:border-gray-700"
>
  
</button>


<button class="text-gray-500 hover:text-gray-700 focus:text-gray-700 border border-current">



</button>
```
Since this color has been added to the default color palette, it is available for textColor, borderColor, backgroundColor, and placeholderColor utilities automatically.

New inline-grid utility (#1375)

We've added an inline-grid utility for setting display: inline-grid. This probably should've been included in v1.2 and somehow got missed, but it's here now baby.
```
<span class="inline-grid grid-cols-3 col-gap-4">
  
</span>
```
Will you ever use this? I never have, but it should still be there dammit.

New flow-root display utility (#1247)

We've added a new flow-root utility for display: flow-root. Never heard of it? Me neither until it was PR'd.

It behaves exactly like display: block with one magical difference: it prevents collapsing margins!
```
<div class="flow-root">
  
</div>
```
You'll start to find all sorts of useful use-cases for this if you pay attention, like completely obsoleting clearfix hacks.

New clear-none utility (#1413)

This has been in the documentation for months but didn't actually exist in the framework — whoops.

It sets clear: none, which is mostly useful for resetting the clear property at different breakpoints.
```
<p class="clear-left md:clear-none">
  
</p>
```
Only two people noticed it was documented but missing, so odds are you don't even care that we added this.

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
CSS Transform support
CSS Grid support
Added max-w-{screen} utilities
Added max-w-none utility
Added rounded-md utility
Added shadow-sm utility
Added shadow-xs utility
Added stroke-width utilities
Added fixed line-height utilities
Added additional display utilities for table elements
Added box-sizing utilities
Added clear utilities
Config file dependencies are now watchable
Allow plugins to extend the user's config
Added new plugin and plugin.withOptions APIs

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">// .transition-{property}</span>
<span class="pl-c1">transitionProperty</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">none</span>: <span class="pl-s">'none'</span><span class="pl-kos">,</span>
  <span class="pl-c1">all</span>: <span class="pl-s">'all'</span><span class="pl-kos">,</span>
  <span class="pl-c1">default</span>: <span class="pl-s">'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform'</span><span class="pl-kos">,</span>
  <span class="pl-c1">colors</span>: <span class="pl-s">'background-color, border-color, color, fill, stroke'</span><span class="pl-kos">,</span>
  <span class="pl-c1">opacity</span>: <span class="pl-s">'opacity'</span><span class="pl-kos">,</span>
  <span class="pl-c1">shadow</span>: <span class="pl-s">'box-shadow'</span><span class="pl-kos">,</span>
  <span class="pl-c1">transform</span>: <span class="pl-s">'transform'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .ease-{timingFunction}</span>
<span class="pl-c1">transitionTimingFunction</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">linear</span>: <span class="pl-s">'linear'</span><span class="pl-kos">,</span>
  <span class="pl-c1">in</span>: <span class="pl-s">'cubic-bezier(0.4, 0, 1, 1)'</span><span class="pl-kos">,</span>
  <span class="pl-c1">out</span>: <span class="pl-s">'cubic-bezier(0, 0, 0.2, 1)'</span><span class="pl-kos">,</span>
  <span class="pl-s">'in-out'</span>: <span class="pl-s">'cubic-bezier(0.4, 0, 0.2, 1)'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .duration-{duration}</span>
<span class="pl-c1">transitionDuration</span>: <span class="pl-kos">{</span>
  <span class="pl-s">'75'</span>: <span class="pl-s">'75ms'</span><span class="pl-kos">,</span>
  <span class="pl-s">'100'</span>: <span class="pl-s">'100ms'</span><span class="pl-kos">,</span>
  <span class="pl-s">'150'</span>: <span class="pl-s">'150ms'</span><span class="pl-kos">,</span>
  <span class="pl-s">'200'</span>: <span class="pl-s">'200ms'</span><span class="pl-kos">,</span>
  <span class="pl-s">'300'</span>: <span class="pl-s">'300ms'</span><span class="pl-kos">,</span>
  <span class="pl-s">'500'</span>: <span class="pl-s">'500ms'</span><span class="pl-kos">,</span>
  <span class="pl-s">'700'</span>: <span class="pl-s">'700ms'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1000'</span>: <span class="pl-s">'1000ms'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</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">// .origin-{origin}</span>
<span class="pl-c1">transformOrigin</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">center</span>: <span class="pl-s">'center'</span><span class="pl-kos">,</span>
  <span class="pl-c1">top</span>: <span class="pl-s">'top'</span><span class="pl-kos">,</span>
  <span class="pl-s">'top-right'</span>: <span class="pl-s">'top right'</span><span class="pl-kos">,</span>
  <span class="pl-c1">right</span>: <span class="pl-s">'right'</span><span class="pl-kos">,</span>
  <span class="pl-s">'bottom-right'</span>: <span class="pl-s">'bottom right'</span><span class="pl-kos">,</span>
  <span class="pl-c1">bottom</span>: <span class="pl-s">'bottom'</span><span class="pl-kos">,</span>
  <span class="pl-s">'bottom-left'</span>: <span class="pl-s">'bottom left'</span><span class="pl-kos">,</span>
  <span class="pl-c1">left</span>: <span class="pl-s">'left'</span><span class="pl-kos">,</span>
  <span class="pl-s">'top-left'</span>: <span class="pl-s">'top left'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .scale-{scale}</span>
<span class="pl-c">// .scale-x-{scale}</span>
<span class="pl-c">// .scale-y-{scale}</span>
<span class="pl-c1">scale</span>: <span class="pl-kos">{</span>
  <span class="pl-s">'0'</span>: <span class="pl-s">'0'</span><span class="pl-kos">,</span>
  <span class="pl-s">'50'</span>: <span class="pl-s">'.5'</span><span class="pl-kos">,</span>
  <span class="pl-s">'75'</span>: <span class="pl-s">'.75'</span><span class="pl-kos">,</span>
  <span class="pl-s">'90'</span>: <span class="pl-s">'.9'</span><span class="pl-kos">,</span>
  <span class="pl-s">'95'</span>: <span class="pl-s">'.95'</span><span class="pl-kos">,</span>
  <span class="pl-s">'100'</span>: <span class="pl-s">'1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'105'</span>: <span class="pl-s">'1.05'</span><span class="pl-kos">,</span>
  <span class="pl-s">'110'</span>: <span class="pl-s">'1.1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'125'</span>: <span class="pl-s">'1.25'</span><span class="pl-kos">,</span>
  <span class="pl-s">'150'</span>: <span class="pl-s">'1.5'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .rotate-{angle}</span>
<span class="pl-c1">rotate</span>: <span class="pl-kos">{</span>
  <span class="pl-s">'-180'</span>: <span class="pl-s">'-180deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'-90'</span>: <span class="pl-s">'-90deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'-45'</span>: <span class="pl-s">'-45deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'0'</span>: <span class="pl-s">'0'</span><span class="pl-kos">,</span>
  <span class="pl-s">'45'</span>: <span class="pl-s">'45deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'90'</span>: <span class="pl-s">'90deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'180'</span>: <span class="pl-s">'180deg'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .translate-x-{distance}</span>
<span class="pl-c">// .translate-y-{distance}</span>
<span class="pl-c">// .-translate-x-{distance}</span>
<span class="pl-c">// .-translate-y-{distance}</span>
<span class="pl-en">translate</span>: <span class="pl-kos">(</span><span class="pl-s1">theme</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> negative <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
  ...<span class="pl-s1">theme</span><span class="pl-kos">(</span><span class="pl-s">'spacing'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  ...<span class="pl-en">negative</span><span class="pl-kos">(</span><span class="pl-s1">theme</span><span class="pl-kos">(</span><span class="pl-s">'spacing'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-s">'-full'</span>: <span class="pl-s">'-100%'</span><span class="pl-kos">,</span>
  <span class="pl-s">'-1/2'</span>: <span class="pl-s">'-50%'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1/2'</span>: <span class="pl-s">'50%'</span><span class="pl-kos">,</span>
  <span class="pl-c1">full</span>: <span class="pl-s">'100%'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>

<span class="pl-c">// .skew-x-{amount}</span>
<span class="pl-c">// .skew-y-{amount}</span>
<span class="pl-c1">skew</span>: <span class="pl-kos">{</span>
  <span class="pl-s">'-12'</span>: <span class="pl-s">'-12deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'-6'</span>: <span class="pl-s">'-6deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'-3'</span>: <span class="pl-s">'-3deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'0'</span>: <span class="pl-s">'0'</span><span class="pl-kos">,</span>
  <span class="pl-s">'3'</span>: <span class="pl-s">'3deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'6'</span>: <span class="pl-s">'6deg'</span><span class="pl-kos">,</span>
  <span class="pl-s">'12'</span>: <span class="pl-s">'12deg'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</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">// .gap-{spacing}, .row-gap-{spacing}, .col-gap-{spacing}</span>
<span class="pl-en">gap</span>: <span class="pl-s1">theme</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">theme</span><span class="pl-kos">(</span><span class="pl-s">'spacing'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>

<span class="pl-c">// .grid-cols-{cols}</span>
<span class="pl-c1">gridTemplateColumns</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">none</span>: <span class="pl-s">'none'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1'</span>: <span class="pl-s">'repeat(1, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'2'</span>: <span class="pl-s">'repeat(2, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'3'</span>: <span class="pl-s">'repeat(3, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'4'</span>: <span class="pl-s">'repeat(4, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'5'</span>: <span class="pl-s">'repeat(5, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'6'</span>: <span class="pl-s">'repeat(6, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'7'</span>: <span class="pl-s">'repeat(7, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'8'</span>: <span class="pl-s">'repeat(8, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'9'</span>: <span class="pl-s">'repeat(9, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'10'</span>: <span class="pl-s">'repeat(10, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'11'</span>: <span class="pl-s">'repeat(11, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'12'</span>: <span class="pl-s">'repeat(12, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .col-{value}</span>
<span class="pl-c1">gridColumn</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">auto</span>: <span class="pl-s">'auto'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-1'</span>: <span class="pl-s">'span 1 / span 1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-2'</span>: <span class="pl-s">'span 2 / span 2'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-3'</span>: <span class="pl-s">'span 3 / span 3'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-4'</span>: <span class="pl-s">'span 4 / span 4'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-5'</span>: <span class="pl-s">'span 5 / span 5'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-6'</span>: <span class="pl-s">'span 6 / span 6'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-7'</span>: <span class="pl-s">'span 7 / span 7'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-8'</span>: <span class="pl-s">'span 8 / span 8'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-9'</span>: <span class="pl-s">'span 9 / span 9'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-10'</span>: <span class="pl-s">'span 10 / span 10'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-11'</span>: <span class="pl-s">'span 11 / span 11'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-12'</span>: <span class="pl-s">'span 12 / span 12'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .col-start-{value}</span>
<span class="pl-c1">gridColumnStart</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">auto</span>: <span class="pl-s">'auto'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1'</span>: <span class="pl-s">'1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'2'</span>: <span class="pl-s">'2'</span><span class="pl-kos">,</span>
  <span class="pl-s">'3'</span>: <span class="pl-s">'3'</span><span class="pl-kos">,</span>
  <span class="pl-s">'4'</span>: <span class="pl-s">'4'</span><span class="pl-kos">,</span>
  <span class="pl-s">'5'</span>: <span class="pl-s">'5'</span><span class="pl-kos">,</span>
  <span class="pl-s">'6'</span>: <span class="pl-s">'6'</span><span class="pl-kos">,</span>
  <span class="pl-s">'7'</span>: <span class="pl-s">'7'</span><span class="pl-kos">,</span>
  <span class="pl-s">'8'</span>: <span class="pl-s">'8'</span><span class="pl-kos">,</span>
  <span class="pl-s">'9'</span>: <span class="pl-s">'9'</span><span class="pl-kos">,</span>
  <span class="pl-s">'10'</span>: <span class="pl-s">'10'</span><span class="pl-kos">,</span>
  <span class="pl-s">'11'</span>: <span class="pl-s">'11'</span><span class="pl-kos">,</span>
  <span class="pl-s">'12'</span>: <span class="pl-s">'12'</span><span class="pl-kos">,</span>
  <span class="pl-s">'13'</span>: <span class="pl-s">'13'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .col-end-{value}</span>
<span class="pl-c1">gridColumnEnd</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">auto</span>: <span class="pl-s">'auto'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1'</span>: <span class="pl-s">'1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'2'</span>: <span class="pl-s">'2'</span><span class="pl-kos">,</span>
  <span class="pl-s">'3'</span>: <span class="pl-s">'3'</span><span class="pl-kos">,</span>
  <span class="pl-s">'4'</span>: <span class="pl-s">'4'</span><span class="pl-kos">,</span>
  <span class="pl-s">'5'</span>: <span class="pl-s">'5'</span><span class="pl-kos">,</span>
  <span class="pl-s">'6'</span>: <span class="pl-s">'6'</span><span class="pl-kos">,</span>
  <span class="pl-s">'7'</span>: <span class="pl-s">'7'</span><span class="pl-kos">,</span>
  <span class="pl-s">'8'</span>: <span class="pl-s">'8'</span><span class="pl-kos">,</span>
  <span class="pl-s">'9'</span>: <span class="pl-s">'9'</span><span class="pl-kos">,</span>
  <span class="pl-s">'10'</span>: <span class="pl-s">'10'</span><span class="pl-kos">,</span>
  <span class="pl-s">'11'</span>: <span class="pl-s">'11'</span><span class="pl-kos">,</span>
  <span class="pl-s">'12'</span>: <span class="pl-s">'12'</span><span class="pl-kos">,</span>
  <span class="pl-s">'13'</span>: <span class="pl-s">'13'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .grid-rows-{rows}</span>
<span class="pl-c1">gridTemplateRows</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">none</span>: <span class="pl-s">'none'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1'</span>: <span class="pl-s">'repeat(1, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'2'</span>: <span class="pl-s">'repeat(2, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'3'</span>: <span class="pl-s">'repeat(3, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'4'</span>: <span class="pl-s">'repeat(4, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'5'</span>: <span class="pl-s">'repeat(5, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
  <span class="pl-s">'6'</span>: <span class="pl-s">'repeat(6, minmax(0, 1fr))'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .row-{value}</span>
<span class="pl-c1">gridRow</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">auto</span>: <span class="pl-s">'auto'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-1'</span>: <span class="pl-s">'span 1 / span 1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-2'</span>: <span class="pl-s">'span 2 / span 2'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-3'</span>: <span class="pl-s">'span 3 / span 3'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-4'</span>: <span class="pl-s">'span 4 / span 4'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-5'</span>: <span class="pl-s">'span 5 / span 5'</span><span class="pl-kos">,</span>
  <span class="pl-s">'span-6'</span>: <span class="pl-s">'span 6 / span 6'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .row-start-{value}</span>
<span class="pl-c1">gridRowStart</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">auto</span>: <span class="pl-s">'auto'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1'</span>: <span class="pl-s">'1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'2'</span>: <span class="pl-s">'2'</span><span class="pl-kos">,</span>
  <span class="pl-s">'3'</span>: <span class="pl-s">'3'</span><span class="pl-kos">,</span>
  <span class="pl-s">'4'</span>: <span class="pl-s">'4'</span><span class="pl-kos">,</span>
  <span class="pl-s">'5'</span>: <span class="pl-s">'5'</span><span class="pl-kos">,</span>
  <span class="pl-s">'6'</span>: <span class="pl-s">'6'</span><span class="pl-kos">,</span>
  <span class="pl-s">'7'</span>: <span class="pl-s">'7'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c">// .row-end-{value}</span>
<span class="pl-c1">gridRowEnd</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">auto</span>: <span class="pl-s">'auto'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1'</span>: <span class="pl-s">'1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'2'</span>: <span class="pl-s">'2'</span><span class="pl-kos">,</span>
  <span class="pl-s">'3'</span>: <span class="pl-s">'3'</span><span class="pl-kos">,</span>
  <span class="pl-s">'4'</span>: <span class="pl-s">'4'</span><span class="pl-kos">,</span>
  <span class="pl-s">'5'</span>: <span class="pl-s">'5'</span><span class="pl-kos">,</span>
  <span class="pl-s">'6'</span>: <span class="pl-s">'6'</span><span class="pl-kos">,</span>
  <span class="pl-s">'7'</span>: <span class="pl-s">'7'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">,</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">// .stroke-{width}</span>
<span class="pl-c1">strokeWidth</span>: <span class="pl-kos">{</span>
  <span class="pl-s">'0'</span>: <span class="pl-s">'0'</span><span class="pl-kos">,</span>
  <span class="pl-s">'1'</span>: <span class="pl-s">'1'</span><span class="pl-kos">,</span>
  <span class="pl-s">'2'</span>: <span class="pl-s">'2'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</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">// .leading-{size}</span>
<span class="pl-c1">lineHeight</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">none</span>: <span class="pl-s">'1'</span><span class="pl-kos">,</span>
  <span class="pl-c1">tight</span>: <span class="pl-s">'1.25'</span><span class="pl-kos">,</span>
  <span class="pl-c1">snug</span>: <span class="pl-s">'1.375'</span><span class="pl-kos">,</span>
  <span class="pl-c1">normal</span>: <span class="pl-s">'1.5'</span><span class="pl-kos">,</span>
  <span class="pl-c1">relaxed</span>: <span class="pl-s">'1.625'</span><span class="pl-kos">,</span>
  <span class="pl-c1">loose</span>: <span class="pl-s">'2'</span><span class="pl-kos">,</span>
  <span class="pl-s">'3'</span>: <span class="pl-s">'.75rem'</span><span class="pl-kos">,</span>
  <span class="pl-s">'4'</span>: <span class="pl-s">'1rem'</span><span class="pl-kos">,</span>
  <span class="pl-s">'5'</span>: <span class="pl-s">'1.25rem'</span><span class="pl-kos">,</span>
  <span class="pl-s">'6'</span>: <span class="pl-s">'1.5rem'</span><span class="pl-kos">,</span>
  <span class="pl-s">'7'</span>: <span class="pl-s">'1.75rem'</span><span class="pl-kos">,</span>
  <span class="pl-s">'8'</span>: <span class="pl-s">'2rem'</span><span class="pl-kos">,</span>
  <span class="pl-s">'9'</span>: <span class="pl-s">'2.25rem'</span><span class="pl-kos">,</span>
  <span class="pl-s">'10'</span>: <span class="pl-s">'2.5rem'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</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.

from tailwindcss GitHub release notes

Commit messages

Package name: tailwindcss

f7134aa 1.3.4
b0c7872 Fix bug where divide-x/y-0 didn't work due to missing unit in calc
e262218 Update fixtures
72583c5 1.3.3
5598a79 Fix bug in divide-x utilities, checking wrong custom property
d5e64c4 1.3.2
bf04572 Add responsive variants for space and divide utilities
5b3f8b5 1.3.1
1d323c9 Fix bug in space-x utilities, checking wrong custom property
d710db5 1.3.0
b3b06e8 Add negative `space` utility support
8df2cd5 Merge branch 'stack-divide-utilities'
a14ea02 Use border-width for divide, not border
1743c23 Merge pull request #1594 from tailwindcss/stack-divide-utilities
0653659 Update fixtures
a75b690 Support reverse order for space and divide utilities
7ef2e0a Merge pull request #1593 from tailwindcss/dependabot/npm_and_yarn/master/resolve-1.16.1
013345d Bump resolve from 1.16.0 to 1.16.1
3ca7ada Merge pull request #1592 from tailwindcss/dependabot/npm_and_yarn/master/babel-jest-25.4.0
6aa0510 Bump babel-jest from 25.3.0 to 25.4.0
cb41c6f Merge pull request #1591 from tailwindcss/dependabot/npm_and_yarn/master/jest-25.4.0
be76d63 Bump jest from 25.3.0 to 25.4.0
8b2473f Merge pull request #1584 from tailwindcss/stack-divide-utilities
3584791 Merge pull request #1398 from OwenMelbz/master

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

Snyk has created this PR to upgrade tailwindcss from 1.2.0 to 1.3.4. See this package in NPM: https://www.npmjs.com/package/tailwindcss See this project in Snyk: https://app.snyk.io/org/cds-snc/project/1b780512-a369-46ac-88d6-f86c84b1f642?utm_source=github&utm_medium=upgrade-pr

snyk-bot added 2 commits May 13, 2020 20:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Snyk] Upgrade tailwindcss from 1.2.0 to 1.3.4 #12

[Snyk] Upgrade tailwindcss from 1.2.0 to 1.3.4 #12

snyk-bot commented May 14, 2020

Tailwind CSS v1.3.0

New Features

New `space` and `divide` layout utilities (#1584, #1594)

New `transition-delay` utilities (#1462)

New `group-focus` variant (#1577)

Support for specifying a default line-height for each font-size utility (#1532)

Support for breakpoint-specific padding for `container` class (#1398)

Added `current` to the default color palette (#1438)

New `inline-grid` utility (#1375)

New `flow-root` display utility (#1247)

New `clear-none` utility (#1413)

Tailwind CSS v1.2.0

New Features

CSS Transition support (#1273)

CSS Transform support (#1272)

CSS Grid utilities (#1274)

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

Added max-w-none utility (#1283)

Added rounded-md utility (#1281)

Added shadow-sm utility (#1280)

Added shadow-xs utility (#1333)

Added stroke-width utilities (#1094)

Added fixed line-height utilities (#1362)

Added additional display utilities for table elements (#954)

Added box-sizing utilities (#1031)

Added clear utilities (#1051)

Config file dependencies are now watchable (#1072)

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

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

[Snyk] Upgrade tailwindcss from 1.2.0 to 1.3.4 #12

Are you sure you want to change the base?

[Snyk] Upgrade tailwindcss from 1.2.0 to 1.3.4 #12

Conversation

snyk-bot commented May 14, 2020

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

Tailwind CSS v1.3.0

New Features

New space and divide layout utilities (#1584, #1594)

New transition-delay utilities (#1462)

New group-focus variant (#1577)

Support for specifying a default line-height for each font-size utility (#1532)

Support for breakpoint-specific padding for container class (#1398)

Added current to the default color palette (#1438)

New inline-grid utility (#1375)

New flow-root display utility (#1247)

New clear-none utility (#1413)

Tailwind CSS v1.2.0

New Features

CSS Transition support (#1273)

CSS Transform support (#1272)

CSS Grid utilities (#1274)

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

Added max-w-none utility (#1283)

Added rounded-md utility (#1281)

Added shadow-sm utility (#1280)

Added shadow-xs utility (#1333)

Added stroke-width utilities (#1094)

Added fixed line-height utilities (#1362)

Added additional display utilities for table elements (#954)

Added box-sizing utilities (#1031)

Added clear utilities (#1051)

Config file dependencies are now watchable (#1072)

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

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

New `space` and `divide` layout utilities (#1584, #1594)

New `transition-delay` utilities (#1462)

New `group-focus` variant (#1577)

Support for breakpoint-specific padding for `container` class (#1398)

Added `current` to the default color palette (#1438)

New `inline-grid` utility (#1375)

New `flow-root` display utility (#1247)

New `clear-none` utility (#1413)

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