Getting started

How to use Mamba UI?

Setup Tailwind CSS
Find something that you like from the components or templates .
Choose the primary color from the Tailwind CSS color palette
Select the light or dark theme
Click the HTML, Vue or JSX -buttons to see the code for the selected part
Copy-paste into your project
Profit!

Install Tailwind CSS

The recommended way to use Tailwind CSS in a project is to install it and it's peer-dependencies via npm.

npm install tailwindcss postcss autoprefixer -D

The official installation instructions are really good and they have integration guides for some of the most popular frameworks as well.

If you don't want to install Tailwind you can add a link to the Tailwind stylesheet inside the <head><∕head> tags in your html instead. Note that this way doesn't remove all the unused classes from the production build.

In case you want to just quickly test the components or customize the code, you can also copy them to Tailwind CSS's official online playground Tailwind Play .

Note that Tailwind doesn't have all the colors enabled in the default configuration. Below is an example of a configuration that has all the different colors enabled with their respective names. I'd recommend using a copy of that and then removing the colors that you don't need.


const colors = require('tailwindcss/colors');

module.exports = {
	purge: [],
	theme: {
		colors: {
			transparent: 'transparent',
			current: 'currentColor',
			black: colors.black,
			white: colors.white,
			rose: colors.rose,
			pink: colors.pink,
			fuchsia: colors.fuchsia,
			purple: colors.purple,
			violet: colors.violet,
			indigo: colors.indigo,
			blue: colors.blue,
			lightBlue: colors.lightBlue, // Only in Tailwind CSS <=v2.1
			sky: colors.sky, // As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`  
			cyan: colors.cyan,
			teal: colors.teal,
			emerald: colors.emerald,
			green: colors.green,
			lime: colors.lime,
			yellow: colors.yellow,
			amber: colors.amber,
			orange: colors.orange,
			red: colors.red,
			slate: colors.slate,
			zinc: colors.zinc,
			gray: colors.gray,
			neutral: colors.blueGray,
			stone: colors.stone,
		},
		variants: {},
		plugins: [],
	}
}

This project is not affiliated with or endorsed by the creators of the Tailwind CSS framework.