Tailwincss: Nie można używać punktów przerwania do cienia pudełkowego

Question 1

Próbuję TailwindCSS po raz pierwszy i wygląda na to, że nie mogę używać punktów przerwania dla cieni pól. Wszystkie inne punkty przerwania działają dobrze, z wyjątkiem pola cienia.

Przy okazji, używam niestandardowego box-shadow.

HTML:

<div 
   class="w-auto h-screen pl-10 mt-20 pt-12 absolute left-0 top-0 bg-gray-900 shadow-menu md:shadow-none"
>

Tailwind.config.js:

module.exports = {
  theme: {
    fontFamily: {
      base: ["Quicksand", "sans-serif"],
      title: ["Belgrano", "serif"]
    },
    extend: {},
    boxShadow: {
      menu: "0 3px 5px rgba(0,0,0,0.2)"
    }
  },
  variants: {},
  plugins: []
};

css tailwind-css

2

vinicius-bortoletto 19 grudzień 2019, 19:30

Answer

Musisz włączyć Pseudo-Class Variants dla boxShadow w swoim tailwind.config.js w ten sposób:

boxShadow: ['responsive', 'hover', 'focus']

Umożliwi to dostosowanie boxShadow w oparciu o responsywne klasy, najechanie kursorem lub fokus.

Twoje tailwind.config.js będzie wyglądać tak:

module.exports = {
  theme: {
    fontFamily: {
      base: ["Quicksand", "sans-serif"],
      title: ["Belgrano", "serif"]
    },
    extend: {},
    boxShadow: {
      menu: "0 3px 5px rgba(0,0,0,0.2)"
    }
  },
  variants: {
    boxShadow: ['responsive', 'hover', 'focus']
  },
  plugins: []
};

Mam nadzieję, że to pomoże.

Zasoby https://tailwindcss.com/docs/pseudo-class-variants/#app

2

Ben 20 grudzień 2019, 02:58

Question 2