Skip to content

Adding more colors #227

Description

@smukee

After adding more colors to tailwind.config.js and then trying to rebuild the style I get an error:

# npx tailwindcss -i assets/css/main.css -o style.css
npm warn Unknown global config "python". This will stop working in the next major version of npm.
≈ tailwindcss v4.1.17

Error: Can't resolve 'search.css' in '/usr/local/example/themes/hugoplate/assets/css'
// tailwind.config.js
module.exports = {
  content: [
    "./layouts/**/*.html",
    "./content/**/*.md",
    "./content/**/*.html",
    // If you use any Archetypes or other folders with .html/.md, add them too
  ],
  theme: {
    extend: {
      colors: {
        // ←←← ADD / CHANGE YOUR COLORS HERE
        primary:   "#3b82f6",  // blue-500
        "primary-dark": "#2563eb", 
        secondary: "#10b981",  // emerald-500
        accent:    "#f59e0b",  // amber-500
        muted:     "#6b7280",  // gray-500
        background:"#f9fafb",  // gray-50
        foreground:"#111827",  // gray-900
        jasmine: "#E9C46A",
        copper: "#BC6C25",
      },
    },
  },
  plugins: [],
}

Simply running Hugo won't cut it if for example <div class="bg-accent"></div> is used. bg-accent and all others are missing in the browser...
How should I make it read custom colors in tailwind.config.js?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions