Introduction

Goodash is Tailwind dashboard build with Material Design 3. This template is perfect for make professional dasboard admin for your site. Equipped with layouts, pages and various kinds of widgets to speed up the dashboard building process.

Get Started

Start development in a simple way

1. Open Goodash folder from terminal

2. Run

npm install

3. Start development

npm run dev

4. Development server http://localhost:3000/

5. Start editing the html file and the server will reload automatically after the html changes

6. If you need minify css, Run

npm run build

Edit Colors

If you are familiar with Tailwind this should be easy as the Material color scheme is adapted to tailwind style. The Material 3 color scheme is start from 10 to 99 (from dark to light). While the Tailwind color scheme is from 50 to 950 (from light to dark).

How to convert colors?

1.Get colors from https://m3.material.io/theme-builder#/custom

2.Customize theme color and ( Export>> Web css>> tokens.css )

3.Open tokens.css, you need to convert from Material design color to Tailwind format.

4. After convert Material color to Tailwind, insert colors to tailwind.config.js

Edit Css

Most of the code uses Tailwind css, so you can edit directly via html. But there are some additional css that you can edit or delete via src/tailwindcss/tailwind.css

Edit JS

Most of the javascript that Goodash uses "Tailmater" is src/js/tailmater.js (Vanilla Javascript).

For an alternative, you can use alpine.js.

Plugins configuration files are in src/js/vendor.js

Specifically for chart.js configuration, it is located in the src/js/charts/**.js

Edit Font

The default Goodash font uses Roboto. If you want to replace it with another font, please edit via tailwind.config.js (fontFamily). Don't forget to edit the css font link from html head.

Like: <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;700&display=swap" rel="stylesheet">