Сниппеты Tailwind

← Tailwind

Hamburger Menu

SVG

<div class="flex items-center">
  <button class="outline-none">
    <svg
      class="w-10 h-10 text-gray-500"
      x-show="!showMenu"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
  </button>
</div>

Источник: Creating a Responsive Navigation bar Using Tailwind CSS and Javascript

CSS классами Tailwind

<template>

  <!-- Анимация 1 -->
  <button class="hover:border-gray-500 hover:text-gray-500 w-14 h-12 text-gray-500 duration-200 border-2 border-white rounded" click.prevent="toggle">
    <span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded transform duration-300" :class="{ 'rotate-45 translate-y-2.5' : isBurgerActive }"></span>
    <span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded duration-200" :class="{ 'opacity-0' : isBurgerActive }"></span>
    <span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded transform duration-300" :class="{ '-rotate-45 -translate-y-2.5' : isBurgerActive }"></span>
  </button>

  <!-- Анимация 2 -->
  <button 
    class="w-12 h-12 text-gray-500 transition-all duration-300 ease-in-out border-4 border-solid"
    :class="[ isBurgerActive ? 'transform rotate-45 border-gray-500 rounded-full' : 'rounded border-opacity-0' ]"
    @click.prevent="toggle"
  >
    <span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded transform duration-300 ease-in-out" :class="{ 'w-6 transform translate-y-2.5' : isBurgerActive }"></span>
    <span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded duration-300" :class="{ 'w-6 opacity-0' : isBurgerActive }"></span>
    <span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded transform duration-300 ease-in-out" :class="{ 'w-6 -translate-y-2.5 rotate-90' : isBurgerActive }"></span>
  </button>

</template>

<script>
export default {
  data() {
    return {
      isBurgerActive: false,
    };
  },
  methods: {
    toggle() {
      this.isBurgerActive = ! this.isBurgerActive;
    },
  },
};
</script>

Пример анимаций отсюда: https://codepen.io/RRoberts/pen/ZBYaJr

Breakpoints

• https://tailwindcss.com/docs/breakpoints
• https://tailwindcss.com/docs/responsive-design

Виджет

Блок в левом нижнем углу, который показывает активный breakpoint:

<!-- Breakpoints Widget -->
<div class="sm:bg-red-700 md:bg-yellow-700 lg:bg-green-700 xl:bg-blue-700 2xl:bg-purple-700 rounded-tr-md fixed bottom-0 left-0 px-3 py-1 text-sm text-white bg-gray-600">
  <span class="sm:hidden">&lt; 640px</span>
  <span class="sm:inline md:hidden hidden">SM ≥ 640px</span>
  <span class="md:inline lg:hidden hidden">MD ≥ 768px</span>
  <span class="lg:inline xl:hidden hidden">LG ≥ 1024px</span>
  <span class="xl:inline 2xl:hidden hidden">XL ≥ 1280px</span>
  <span class="2xl:inline hidden">XL ≥ 1536px</span>
</div>

Он же средствами CSS:

body:after {
  @apply fixed right-0 bottom-0 h-6 px-3 flex justify-center items-center
  content-['<_640px'] bg-pink-500
  sm:content-['SM'] sm:bg-red-700
  md:content-['MD'] md:bg-yellow-700
  lg:content-['LG'] lg:bg-green-700
  xl:content-['XL'] xl:bg-sky-700
  2xl:content-['2XL'] 2xl:bg-purple-700;
}

Split by Breakpoints

• См. также: CSS and Network Performance – CSS Wizardry

Предположительной лучший вариант подключения стилей (обсуждение):

<!-- Only load relevant stylesheets when the current screen size requires them -->
<link href="xs.css" rel="stylesheet">
<link href="sm.css" rel="stylesheet" media="@media (min-width: 576px)">
<link href="md.css" rel="stylesheet" media="@media (min-width: 768px)">
<link href="lg.css" rel="stylesheet" media="@media (min-width: 992px)">
<link href="xl.css" rel="stylesheet" media="@media (min-width: 1200px)">

Решение (отсюда):

Updated screens values:

screens: {
  /* ✅ */ sm: '576px',
  /* ✅ */ md: [ { min: '668px', max: '767px' }, { min: '868px' } ],
  /* ✅ */ lg: { min: '992px', max: '1199px' },
  /* ✅ */ xl: { min: '1200px' },
  /* ✅ */ xxl: { max: '1920px' },
  /* ✅ */ print: { raw: 'print' },
  /* ✅ */ dark: { raw: '(prefers-color-scheme: dark)' },
},

Install postcss-extract-media-query:

npm install postcss-extract-media-query --save-dev

Updated plugin config:

require('postcss-extract-media-query')({
  output: { path: paths.dist, name: '[name]-[query].css' },
  queries: tailwindScreenQueries(),
})

const tailwindScreenQueries = () => {
  const buildQuery = (value) => {
    const getMinMaxQuery = (value) => {
      return [
        value.min ? `(min-width: ${value.min})` : null,
        value.max ? `(max-width: ${value.max})` : null,
      ].filter(Boolean).join(' and ')
    }

    const query = typeof value === 'string'
      ? `(min-width: ${value})`
      : Array.isArray(value)
        ? value.map((_value) => buildQuery(_value)).join(', ')
        : value.min || value.max
          ? getMinMaxQuery(value)
          : value.raw

    return query
  }

  return Object
    .entries(require('../../../tailwind.config.js').screens)
    .map(([name, value]) => ({ [buildQuery(value)]: name }))
    .reduce((accumulator, value) => Object.assign(accumulator, value))
}

Columns

Multi-column utilities for Tailwind CSS