• Documentation
  • /
  • Next.js Firebase
  • /
  • Components Styling

Components Styling

The component's styles have largely been placed in a single file components.css which you can find at src/styles/components.css.

Ok, let us explain why.

Even though we are trying to MakerKit look fantastic from the get-go, chances are you will be changing the design heavily.

To make it as easy as possible, we think that by placing the styles in a single place, you'll be able to go through each style faster than if you had to chase many files in the codebase.

Each class has been defined styled using Tailwind. For example, the styles of the Alert component is defined as follows:

@tailwind components;

@layer components {
    .Alert {
        @apply
            py-4 border-l-8
            px-4 rounded-lg
            font-semibold text-sm
            flex items-center justify-between;
    }

    /* ... other components */
}

Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor