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:
- Tailwind CSS Theme Documentation (opens in a new tab)
- Adding Custom Styles with Tailwind CSS (opens in a new tab)
- TailGrids Blog: Component Styling and Building Components (opens in a new tab)
- TailGrids Blog: Customization and Extension (opens in a new tab)
Explore the above references to enhance styling and customizing Tailwind CSS configuration.