tailwind css custom class

Mehedi Islam Ripon answered on March 30, 2023 Popularity 10/10 Helpfulness 4/10

answer tailwind css custom class

related custom class in tailwind config

related add custom class in tailwindcss

tailwind css custom class

Comment

@layer utilities {
  .my-custom-class {
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 8px;
  }
}

In this example, we're using the @layer directive to add a new utility class to
the utilities layer. The my-custom-class class has a gray background, rounded
corners, and a bit of padding.

Once you've defined your custom class, you can use it in your HTML like any other 
Tailwind CSS utility class:
<div class="my-custom-class">This div has a custom class!</div>

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: class css tailwind-css

Link to this answer
Share Copy Link

Contributed on Mar 30 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

Closely Related Answers

custom class in tailwind config

Comment

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: tailwindcss.com

Tags: class clas

Link to this answer
Share Copy Link

Contributed on Sep 25 2023

Xanthous Xenomorph

0 Answers Avg Quality 2/10

add custom class in tailwindcss

Comment

  ({ addUtilities }: any) => {
      addUtilities({
        ".container-custom": {
          "@apply mx-auto w-[90%] max-w-[1800px] md:w-[96%] lg:w-[90%]": {},
        },
        ".container-custom2": {
          "@apply max-w-[1800px] mx-auto": {},
        },
        ".container-custom3": {
          "@apply max-w-[1000px] mx-auto": {},
        },
        ".mt-section": {
          "@apply mt-16 md:mt-24": {},
        },
        ".py-section": {
          "@apply py-16 md:py-24": {},
        },
        ".mb-section": {
          "@apply mb-10 md:mb-16": {},
        },

        ".mt-element": {
          "@apply mt-3 md:mt-4": {},
        },
        ".only-mobile": {
          "@apply lg:hidden": {},
        },
        ".non-mobile": {
          "@apply hidden lg:flex": {},
        },
        ".flex-gap": {
          "@apply gap-y-14 gap-x-12": {},
        },
        ".flex-center": {
          "@apply flex justify-center items-center": {},
        },
        ".paragraph": {
          "@apply text-base font-[400] text-[#BABABA]": {},
        },
        ".h1": {
          "@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl":
            {},
        },
      });
    },

Popularity 9/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: add

Link to this answer
Share Copy Link

Contributed on Feb 16 2024

Shirshak Kandel

0 Answers Avg Quality 2/10

tailwind css custom class

Contents

More Related Answers

tailwind css custom class

Closely Related Answers

custom class in tailwind config

add custom class in tailwindcss

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.