Tailwindcss | Frontend

• Tailwindcss | Frontend

---

info

O Tailwind é impulsionado pelo primeiro design móvel

Extendendo cores

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
    './src/app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        'inova': '#009AE0',
        'background-gray': '#D9D9D9'
  
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

• E na classe tem que usar o prefixo bg-
  • Ex: bg-inova

Variantes

success

As classes sem variantes serão aplicadas primeiro a telas menores e, em seguida, você poderá adicionar variantes para telas maiores.

Exemplo

<div className="flex md:hidden w-2/5 md:w-11/12 mt-0 md:mt-4 items-center shadow-md"></div>

---