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:

javascript is null or empty function

How to check for null, undefined, or empty values in JavaScript

In most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?

Lewis Cianci
Feb 14, 2025 â‹… 4 min read
MERN Stack: Overview With Examples

What is the MERN stack? Overview with examples

Discover how the MERN stack (MongoDB, Express.js, React, Node.js) enables developers to build dynamic, performant, modern websites and apps.

Nefe Emadamerho-Atori
Feb 13, 2025 â‹… 20 min read
Leveraging Parallel Computing In Node.js

Leveraging parallel computing in Node.js

Use parallel computing in Node.js with worker threads to optimize performance, handle CPU-intensive tasks, and utilize multi-core processors.

David Omotayo
Feb 13, 2025 â‹… 8 min read

A guide to modern frontend architecture patterns

Frontend architecture is the foundation of your frontend codebase. Here’s how to optimize the pattern that you choose.

Shalitha Suranga
Feb 12, 2025 â‹… 9 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