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:

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
A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 â‹… 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 10, 2025 â‹… 11 min read
improving ux with scroll-select box

How to improve UX with a scroll-select box

The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.

Emmanuel Odioko
Feb 7, 2025 â‹… 10 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