archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Style state variant notes as alerts

Browse Source
This commit is contained in:
Adam Wathan 2017-12-13 09:46:52 -05:00
parent b1d5661a7b
commit bc057a4a6b
1 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/source/docs/state-variants.blade.md
View File

@ -8,8 +8,6 @@ Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it
## Hover
*By default, **hover variants are only generated for background color, border color, and text color utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.*
Add the `hover:` prefix to only apply a utility on hover.
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
@ -25,9 +23,20 @@ Add the `hover:` prefix to only apply a utility on hover.
@endslot
@endcomponent
## Focus
<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
<div class="flex">
<div class="py-1">
<svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
</div>
<div>
<p class="mb-2"><strong>By default, hover variants are only generated for background color, border color, and text color utilities.</strong></p>
<p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
</div>
</div>
</div>
*By default, **focus variants are not generated for any utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.*
## Focus
Add the `focus:` prefix to only apply a utility on focus.
@ -41,11 +50,21 @@ Add the `focus:` prefix to only apply a utility on focus.
@endslot
@endcomponent
<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
<div class="flex">
<div class="py-1">
<svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
</div>
<div>
<p class="mb-2"><strong>By default, focus variants are not generated for any utilities.</strong></p>
<p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
</div>
</div>
</div>
## Group Hover
*By default, **group hover variants are not generated for any utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.*
If you need to style a child element when hovering over a specific parent element, add the `.group` class to the parent element and add the `group-hover:` prefix to the utility on the child element.
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'bg-grey-lighter p-8'])
@ -63,6 +82,18 @@ If you need to style a child element when hovering over a specific parent elemen
@endslot
@endcomponent
<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
<div class="flex">
<div class="py-1">
<svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
</div>
<div>
<p class="mb-2"><strong>By default, group hover variants are not generated for any utilities.</strong></p>
<p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
</div>
</div>
</div>
## Combining with Responsive Prefixes
State variants are also responsive, meaning you can change an element's hover style for example at different breakpoints.