Tailwind guild theme

tailwind

Tailwind CSS does not provide pre-designed themes, but it does provide a set of low-level utility classes that you can use to style your applications.

To create a custom theme using Tailwind CSS, you can use the configuration file (tailwind.config.js) to customize the colors, fonts, and other styles used in your application.

For example, you can define custom color variants and sizes for various utility classes, like this:

module.exports = {
    theme: {
        extend: {
            colors: {
                'guild-primary': '#23cf5f',
                'guild-secondary': '#3182ce'
            },
            fontSize: {
                '5xl': '3rem'
            },
            margin: {
                '96': '24rem'
            }
        }
    },
    variants: {},
    plugins: []
}

In this example, we have defined two custom color variants called guild-primary and guild-secondary, a custom font size called 5xl, and a custom margin size called 96. These custom variants can then be used in your application like any other Tailwind CSS class.

You can also use the extend property to override the default styles provided by Tailwind CSS. For example, you can modify the default font family like this:

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: [
                    'Inter',
                    ...defaultTheme.fontFamily.sans
                ]
            }
        }
    },
    variants: {},
    plugins: []
}

This will set the default font family to Inter for all elements using the font-sans utility class.

You can find more information about customizing your Tailwind CSS configuration in the Tailwind CSS documentation.