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:

RAG vs. Fine Tuning, A LogRocket Article

Fine-tuning vs. RAG: Which AI strategy fits your frontend project?

Compare fine-tuning vs. RAG to design faster, smarter, and more responsive AI-powered frontend experiences.

Ikeh Akinyemi
Jun 16, 2025 â‹… 8 min read
7 Common CSS Navigation Menu Mistakes And How To Fix Them

7 common CSS navigation menu mistakes and how to fix them

Navigation menu errors are common, even for seasoned developers. Learn seven common navigation menu errors and how to solve them using CSS.

Temitope Oyedele
Jun 13, 2025 â‹… 6 min read
Comparing the top 5 React toast libraries

Comparing the top React toast libraries [2025 update]

Compare the top React toast libraries for when it’s more trouble than it’s worth to create your own custom toast components.

Nefe Emadamerho-Atori
Jun 13, 2025 â‹… 16 min read
Comparison between TanStack Start and Next.js — two modern full-stack React frameworks with different architectural approaches.

TanStack Start vs. Next.js: Choosing the right full-stack React framework

TanStack Start vs. Next.js: both are powerful full-stack React frameworks, but they take fundamentally different approaches to architecture, routing, and developer experience. This guide breaks down their core features from SSR and data fetching to TypeScript support and deployment, to help you choose the right tool for your next React project.

Abiola Farounbi
Jun 12, 2025 â‹… 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