Styling & Customization

In this section, we'll explore styling and customization techniques for TailGrids components to tailor your web applications to specific design and functionality requirements.

We strictly used the internal Tailwind CSS classes, with no additional modifications, extra classes, or modifiers added.

You will get separate code blocks for individual components; after copying the codebase, you can change colors and style parameters using the internal Tailwind CSS classes.

You can find all available classes of Tailwind CSS theming from Tailwind CSS Theming (opens in a new tab).

Also, you can change our core modifications by updating the tailwind.config.js file. For more information, please check out the Tailwind CSS Documentation (opens in a new tab).

Customization Techniques

Inline Styling with Tailwind CSS:

For quick adjustments, directly apply Tailwind CSS utility classes within the HTML of TailGrids components.

Create separate CSS files to override or extend TailGrids styles. Utilize more specific selectors to ensure your customizations take precedence.
Tailwind Configuration (tailwind.config.js)

Customize Tailwind's global theme (colors, fonts, spacing, etc.) for project-wide consistency.

Tailwind Config File

We have updated the configuration file and parameters to fit our design needs and simplify the process.

To simplify the process, We created the Tailwind CSS plugin that automatically resolves everything for you.

You only need to install the TailGrids NPM plugin (opens in a new tab), essential for making everything work perfectly and achieving the styles shown in the demos.

You can install it by running the command below

npm i tailgrids

This will install all the dependencies you need, and the configuration file will look like this:

For HTML

module.exports = {
  content: ["./*.html", "./ecommerce/*.html", "./assets/**/*.js"],
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [require("tailgrids/plugin")],
};

For React

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("tailgrids/plugin")],
};

For Vue

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("tailgrids/plugin")],
};

Further Styling References

For more advanced styling techniques and customization options, you can refer to the following resources:

Explore the above references to enhance styling and customizing Tailwind CSS configuration.

Advance Usage Functionality