How to use ModernTabs in your own mod (Setup):

You have to define this in your build.gradle file:

repositories {
    maven {
        name = "Jitpack"
        url 'https://jitpack.io'
    }
}

dependencies {
  // Only required in a multiloader setup (use this in your common part of your mod)
  // contains the common module
  modImplementation("com.github.Roboter007.ModernTabs:ModernTabs-common:${rootProject.moderntabs_version}")

  // Required on Fabric
  // contains the Fabric specific module including the common module
  modImplementation("com.github.Roboter007.ModernTabs:ModernTabs-fabric:${rootProject.moderntabs_version}")

  // Required on NeoForge
  // contains the NeoForge specific module including the common module
  modImplementation("com.github.Roboter007.ModernTabs:ModernTabs-neoforge:${rootProject.moderntabs_version}")
} 

Then you can define this in your gradle.properties file:

// for the latest version:
moderntabs_version=v1.6.2

What you need to do in order to correctly customize creative tabs with your mod:

// The TabIconBackground class combines any possible state of the tab icon background 
// It uses the default vanilla sprite if it doesn't find a sprite in the given location
// the sprites for the icon background has to be located under textures/gui/sprites/creative_inventory/
// the sprite file for the icon background depends on: tab_tabIdentifer_row_column_selectionState.png
// example file name: tab_example_top_left_selected.png
TabIconBackground exampleTabBackgrounds = new TabIconBackground(ExampleMod.MOD_ID, "example"); // example is the tabIdentifier

// in this example the first argument represents the text background color
// the second argument defines the location of the sprite file and the third and fourth defines the rendered width and height of the example_titel.png
// the sprite file has to be in the sprites folder (in this example under: textures/gui/sprites/creative_inventory/example_titel.png)
SpriteTabTitel spriteTabTitel = new SpriteTabTitel()
                       // the location of the titel sprite
                       .spriteTabTitelLocation(ResourceLocation.fromNamespaceAndPath(ExampleMod.MOD_ID, "container/creative_inventory/example_titel"))
                       // the background color
                       .backgroundColor(new ModernColor("#36454F").lighten(0.5f))
                       // sprite width
                       .width(64)
                       // sprite height
                       .height(10);

// just an example color
ModernColor exampleColor = new ModernColor("#36454F");

// create a new tab design
TabDesign tabDesign = new TabDesign()
        // makes it possible for the defined creative tab to use custom sections
        .sectionsEnabled(true)
        // changes the tab icon background sprite in any given state
        .tabIconBackground(exampleTabBackgrounds)
        // displays a sprite instance of an regular Minecraft item.
        // the sprite for the custom icon has to be located under textures/gui/sprites/
        .tabIconLocation(ResourceLocation.fromNamespaceAndPath(ExampleMod.MOD_ID, "example_icon"))
        // changes the sprite for the scrollbar
        // the scrollbar for the custom icon has to be located under textures/gui/sprites/
        .tabScrollerLocation(ResourceLocation.fromNamespaceAndPath(ExampleMod.MOD_ID, "example_scroller"))
        // modifies your creative tab titel
        // options: 1) aura text style (equivalent to the text of the creative tab banners)
        //          2) sprite (uses a sprite as your creative tab titel)
        //          3) custom (uses the default vanilla style text rendering, but with more configuration options like the text color)
        .customTabTitel(spriteTabTitel)
        // sets only the creative tab background texture color and the scrollbar texture color
        .backgroundColor(exampleColor)
        // this method combines the backgroundColor method and the tabIconBackground method, so you can color the whole tab in a single method call
        .color(exampleColor);

// use your already registered creative tab (in this example: EXAMPLE_TAB)
ModernTabs.configureTab(EXAMPLE_TAB, tabDesign);

// this defines which items are included in which section
// for creating a section you need to define a json file in your assets folder (scroll down a little, if you want to know how create a section)
SectionedItems.addItem(ResourceLocation.fromNamespaceAndPath(ExampleMod.MOD_ID, "example_section"), ExampleItems.EXAMPLE_ITEM);

// hide a debug item from the grid but keep it searchable
TabItemTransforms.setVisibility(MyItems.DEBUG_STICK, TabItemTransforms.VisibilityType.SEARCH_ONLY);

In order for the creative tab sections to work properly, you need to create one JSON file for each creative tab section you want to have.
These json files have to be in the location: assets/mymod/moderntabs/sections/example_section.json and the defined section in your code has to match one json file in this location.

Example JSON file:

{
  "priority": 0,
  "title": {
    "text": { "translate": "itemGroup.examplemod.basics" },
    "color": "#FFFFFF",
    "background": "#AA000000"
  },
  "banner": {
    "sprite": "examplemod:example_banner",
    "animation_mode": "play_on_hover",
    "color": "#D1FF03"
  },
  "overlay": {
    "sprite": "moderntabs:overlay/default_banner_overlay",
    "animation_mode": "not_animated",
    "color": "#D1FF03"
  }
}

How to use ModernTabs in your own mod (Setup):

At first, download the latest KubeJs and ModernTabs version.

What you need to do in order to correctly customize the creative tabs you want to modify:

// The TabIconBackground class combines any possible state of the tab icon background 
// It uses the default vanilla sprite if it doesn't find a sprite in the given location
// the sprites for the icon background has to be located under textures/gui/sprites/creative_inventory/
// the sprite file for the icon background depends on: tab_tabIdentifer_row_column_selectionState.png
// example file name: tab_example_top_left_selected.png
const exampleTabBackgrounds = new TabIconBackground("examplemod", "example"); // example is the tabIdentifier

// in this example the first argument represents the text background color
// the second argument defines the location of the sprite file and the third and fourth defines the rendered width and height of the example_titel.png
// the sprite file has to be in the sprites folder (in this example under: textures/gui/sprites/creative_inventory/example_titel.png)
const spriteTabTitel = new SpriteTabTitel()
                       // the location of the titel sprite
                       .spriteTabTitelLocation("examplemod:container/creative_inventory/example_titel")
                       // the background color
                       .backgroundColor(new ModernColor("#36454F").lighten(0.5))
                       // sprite width
                       .width(64)
                       // sprite height
                       .height(10);

// just an example color
const exampleColor = new ModernColor("#36454F");

// create a new tab design
const tabDesign = new TabDesign()
        // makes it possible for the defined creative tab to use custom sections
        .sectionsEnabled(true)
        // changes the tab icon background sprite in any given state
        .tabIconBackground(exampleTabBackgrounds)
        // displays a sprite instance of an regular Minecraft item.
        // the sprite for the custom icon has to be located under textures/gui/sprites/
        .tabIconLocation("examplemod:example_icon")
        // changes the sprite for the scrollbar
        // the scrollbar for the custom icon has to be located under textures/gui/sprites/
        .tabScrollerLocation("examplemod:example_scroller")
        // modifies your creative tab titel
        // options: 1) aura text style (equivalent to the text of the creative tab banners)
        //          2) sprite (uses a sprite as your creative tab titel)
        //          3) custom (uses the default vanilla style text rendering, but with more configuration options like the text color)
        .customTabTitel(spriteTabTitel)
        // sets only the creative tab background texture color and the scrollbar texture color
        .backgroundColor(exampleColor)
        // this method combines the backgroundColor method and the tabIconBackground method, so you can color the whole tab in a single method call
        .color(exampleColor);

// use your already registered creative tab (in this example: EXAMPLE_TAB)
ModernTabs.configureTab("examplemod:example_tab", tabDesign);

// this defines which items are included in which section
// for creating a section you need to define a json file in your assets folder (scroll down a little, if you want to know how create a section)
SectionedItems.addItem("examplemod:example_section", "examplemod:example_item");

In order for the creative tab sections to work properly, you need to create one JSON file for each creative tab section you want to have.
These json files have to be in the location: assets/mymod/moderntabs/sections/example_section.json and the defined section in your code has to match one json file in this location.

Example JSON file:

{
  "priority": 0,
  "title": {
    "text": { "translate": "itemGroup.examplemod.basics" },
    "color": "#FFFFFF",
    "background": "#AA000000"
  },
  "banner": {
    "sprite": "examplemod:example_banner",
    "animation_mode": "play_on_hover",
    "color": "#D1FF03"
  },
  "overlay": {
    "sprite": "moderntabs:overlay/default_banner_overlay",
    "animation_mode": "not_animated",
    "color": "#D1FF03"
  }
}