2021-09-02
1540
#css
Simohamed Marhraoui
64882
Sep 2, 2021 â‹… 5 min read

Creating custom themes with Tailwind CSS

Simohamed Marhraoui Vue and React developer | Linux enthusiast | Interested in FOSS

Recent posts:

Nx Adoption Guide: Overview, Examples, And Alternatives

Nx adoption guide: Overview, examples, and alternatives

Let’s explore Nx features, use cases, alternatives, and more to help you assess whether it’s the right tool for your needs.

Andrew Evans
Mar 28, 2024 â‹… 9 min read
Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 â‹… 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 â‹… 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 2024 â‹… 8 min read
View all posts

4 Replies to "Creating custom themes with Tailwind CSS"

  1. Hi, I’ve got a question about the last section “Creating the themes using custom properties”
    What is your reasoning behind using theme/extend:

    “`js
    module.exports = {
    theme: {
    extend: {
    textColor,
    backgroundColor,
    },
    },
    }
    “`

    vs theme/colors (I also see in tailwind docs: https://tailwindcss.com/docs/customizing-colors)

    “`js
    module.exports = {
    theme: {
    colors: {
    primary: withOpacityValue(‘–color-primary’),
    secondary: withOpacityValue(‘–color-secondary’),
    // …
    }
    }
    }
    “`

    What would be the use-case to use either solutions?

    1. Hi!

      The first approach would add to Tailwind’s own colors (the bg-red-500s and the border-green-900s,) while the second approach would mean that you’re creating a color palette entirely from scratch, i.e., no default Tailwind colors.

      If your own design system already defines the color palette in its entirety (including blacks and grays, etc.) the second approach would be a no-brainer.

      Hope this makes sense.

Leave a Reply