Breaking News: Grepper is joining You.com. Read the official announcement!

add custom class in tailwindcss

Add Answer

Shirshak Kandel answered on October 24, 2022 Popularity 9/10 Helpfulness 1/10

answer add custom class in tailwindcss

related tailwind css custom class

related custom class in tailwind config

related how to add class to tailwind using js

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 class tailwind-css typescript

Link to this answer
Share Copy Link

Contributed on Feb 16 2024

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

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 clas

Link to this answer
Share Copy Link

Contributed on Mar 30 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

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

how to add class to tailwind using js

Comment

To have tailwindCSS classes to work from JS file-

You need to **define the path of js file** in the content portion of **tailwind.config.js** file.
Example: <br>

    content: ["./*.{html,js}", "./src/**/*.{html,js}"]

Using this, your tailwind compiler will know that you are trying to add a css class from your JS file and that class will appear in the output css file.
 

Content Configuration is mentioned and explained in details - [**Here [Official Documentation]**][1]


  [1]: https://tailwindcss.com/docs/content-configuration#pattern-recommendations

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: add

Link to this answer
Share Copy Link

Contributed on Oct 24 2022

Mohammad Mustak Absar Khan

0 Answers Avg Quality 2/10

add custom class in tailwindcss

Contents

More Related Answers

add custom class in tailwindcss

Closely Related Answers

tailwind css custom class

custom class in tailwind config

how to add class to tailwind using js

Grepper

Documentation

Social

Legal

Contact

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