Accelerating to delivery: Quickly build an Admin Panel or Dashboard-like app using ReactJS, Tailwind CSS. Part I

#react #webpack #tailwindcss

Building a ReactJS app is like building with LEGO blocks. We build larger components out of smaller components and keep repeating that until we have something like the LEGO structure in the above image (Photo by Alphacolor on Unsplash) or an Admin Panel/Dashboard-like UI below:

To do quickly, we will use the Admin Panel template built on Tailwind CSS by tailwindadmin. Instead of taking the traditional approach like those Counter or Todo tutorials, we will get this application, just like what you see above, up and running first. At first, everything is in 1 big JS file that contain 1 big ReactJS component. Then in part II, we will refactor by breaking it up into smaller components.

This is my preferred approach as I believe it allows me to get to delivery a lot quicker. Our real app will look a lot like this kind of Admin Panel rather than a counter that has 2 buttons and a label. We will be able to easily derive from what we have here.

Launch a terminal or console and start typing.

npm init -y
npm i --save-dev webpack webpack-cli path
npm i --save-dev @babel/core @babel/node 
npm i --save-dev @babel/preset-env @babel/preset-react 
npm i --save-dev @babel/plugin-proposal-class-properties babel-loader
npm i --save-dev css-loader 
npm i --save-dev postcss-loader autoprefixer 
npm i --save-dev html-webpack-plugin
npm i --save-dev mini-css-extract-plugin postcss-loader
npm i --save-dev @fullhuman/postcss-purgecss postcss-import
npm i --save tailwindcss tailwindcss-tables
npm i --save react react-dom
npm i --save express webpack-dev-middleware

Then make a new directory called client

mkdir client

We will create some empty files, just place holders first. We will copy contents to them later.

I will use the touch command. If you're on Windows and the command touch is not available, use the PowerShell alternative command New-Item. Or use whatever way you prefer to create an empty file with each of those filenames.

Let's create 3 files in this client directory. Remember they will be empty at first, but we will copy contents to them later:

touch client/index.html
touch client/index.js
touch client/style.css

Create a file on the server side for NodeJS:

touch server.js

Finally create the following config files:

touch webpack.config.js
touch .babelrc
touch postcss.config.js
npx tailwind init tailwind.config.js

Regardless of how you created those empty files, copy the contents listed at the end of the post to each of them.

In the package.json file, find the "scripts" key and replace with the following:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "babel-node ./node_modules/webpack/bin/webpack",
    "start": "node server.js"
},

After you copy the file contents, webpack build it and run:

npm run webpack
npm start

You should see a nice Admin Panel ReactJS application.

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
	<script src="https://kit.fontawesome.com/f7567dfc6a.js" crossorigin="anonymous"></script>
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i" rel="stylesheet">
	<title>React Webpack App on Azure</title>
	</head>

	<body>
	<noscript>
	You need to enable JavaScript to run this app.
	</noscript>
	<div id="root"></div>
	</body>

	</html>

view raw index.html hosted with ❤ by GitHub

	import React from "react";
	import ReactDOM from "react-dom";

	import "style.css";

	function App() {
	return (
	<div className="mx-auto bg-grey-400">
	{/Screen/}
	<div className="min-h-screen flex flex-col">
	{/Header Section Starts Here/}
	<header className="bg-nav">
	<div className="flex justify-between">
	<div className="p-1 mx-3 inline-flex">
	<h1 className="text-white">Logo</h1>
	<i className="fas fa-bars p-3 text-white" onclick="sidebarToggle()" />
	</div>
	<div className="p-1 flex flex-row">
	<a href="https://github.com/tailwindadmin/admin" className="text-white p-2 mr-2 no-underline hidden md:block lg:block">Github</a>
	<img onclick="profileToggle()" className="inline-block h-8 w-8 rounded-full" src="https://avatars1.githubusercontent.com/u/11586092?s=460&u=0fa0fb5f08ad96ac78764bf243e98602cc080539&v=4" alt />
	<a href="#" onclick="profileToggle()" className="text-white p-2 no-underline hidden md:block lg:block">Kevin Le</a>
	<div id="ProfileDropDown" className="rounded hidden shadow-md bg-white absolute pin-t mt-12 mr-1 pin-r">
	<ul className="list-reset">
	<li><a href="#" className="no-underline px-4 py-2 block text-black hover:bg-grey-light">My account</a></li>
	<li><a href="#" className="no-underline px-4 py-2 block text-black hover:bg-grey-light">Notifications</a></li>
	<li><hr className="border-t mx-2 border-grey-ligght" /></li>
	<li><a href="#" className="no-underline px-4 py-2 block text-black hover:bg-grey-light">Logout</a></li>
	</ul>
	</div>
	</div>
	</div>
	</header>
	{//Header/}
	<div className="flex flex-1">
	{/Sidebar/}
	<aside id="sidebar" className="bg-side-nav w-1/2 md:w-1/6 lg:w-1/6 border-r border-side-nav hidden md:block lg:block">
	<ul className="list-reset flex flex-col">
	<li className=" w-full h-full py-3 px-2 border-b border-light-border bg-white">
	<a href="index.html" className="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	<i className="fas fa-tachometer-alt float-left mx-2" />
	Dashboard
	<span><i className="fas fa-angle-right float-right" /></span>
	</a>
	</li>
	<li className="w-full h-full py-3 px-2 border-b border-light-border">
	<a href="forms.html" className="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	<i className="fab fa-wpforms float-left mx-2" />
	Forms
	<span><i className="fa fa-angle-right float-right" /></span>
	</a>
	</li>
	<li className="w-full h-full py-3 px-2 border-b border-light-border">
	<a href="buttons.html" className="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	<i className="fas fa-grip-horizontal float-left mx-2" />
	Buttons
	<span><i className="fa fa-angle-right float-right" /></span>
	</a>
	</li>
	<li className="w-full h-full py-3 px-2 border-b border-light-border">
	<a href="tables.html" className="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	<i className="fas fa-table float-left mx-2" />
	Tables
	<span><i className="fa fa-angle-right float-right" /></span>
	</a>
	</li>
	<li className="w-full h-full py-3 px-2 border-b border-light-border">
	<a href="ui.html" className="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	<i className="fab fa-uikit float-left mx-2" />
	Ui components
	<span><i className="fa fa-angle-right float-right" /></span>
	</a>
	</li>
	<li className="w-full h-full py-3 px-2 border-b border-300-border">
	<a href="modals.html" className="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	<i className="fas fa-square-full float-left mx-2" />
	Modals
	<span><i className="fa fa-angle-right float-right" /></span>
	</a>
	</li>
	<li className="w-full h-full py-3 px-2">
	<a href="#" className="font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	<i className="far fa-file float-left mx-2" />
	Pages
	<span><i className="fa fa-angle-down float-right" /></span>
	</a>
	<ul className="list-reset -mx-2 bg-white-medium-dark">
	<li className="border-t mt-2 border-light-border w-full h-full px-2 py-3">
	<a href="login.html" className="mx-4 font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	Login Page
	<span><i className="fa fa-angle-right float-right" /></span>
	</a>
	</li>
	<li className="border-t border-light-border w-full h-full px-2 py-3">
	<a href="register.html" className="mx-4 font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	Register Page
	<span><i className="fa fa-angle-right float-right" /></span>
	</a>
	</li>
	<li className="border-t border-light-border w-full h-full px-2 py-3">
	<a href="404.html" className="mx-4 font-sans font-hairline hover:font-normal text-sm text-nav-item no-underline">
	404 Page
	<span><i className="fa fa-angle-right float-right" /></span>
	</a>
	</li>
	</ul>
	</li>
	</ul>
	</aside>
	{//Sidebar/}
	{/Main/}
	<main className="bg-white-300 flex-1 p-3 overflow-hidden">
	<div className="flex flex-col">
	{/* Stats Row Starts Here */}
	<div className="flex flex-1 flex-col md:flex-row lg:flex-row mx-2">
	<div className="shadow-lg bg-red-vibrant border-l-8 hover:bg-red-vibrant-dark border-red-vibrant-dark mb-2 p-2 md:w-1/4 mx-2">
	<div className="p-4 flex flex-col">
	<a href="#" className="no-underline text-white text-2xl">
	$244
	</a>
	<a href="#" className="no-underline text-white text-lg">
	Total Sales
	</a>
	</div>
	</div>
	<div className="shadow bg-info border-l-8 hover:bg-info-dark border-info-dark mb-2 p-2 md:w-1/4 mx-2">
	<div className="p-4 flex flex-col">
	<a href="#" className="no-underline text-white text-2xl">
	$199.4
	</a>
	<a href="#" className="no-underline text-white text-lg">
	Total Cost
	</a>
	</div>
	</div>
	<div className="shadow bg-warning border-l-8 hover:bg-warning-dark border-warning-dark mb-2 p-2 md:w-1/4 mx-2">
	<div className="p-4 flex flex-col">
	<a href="#" className="no-underline text-white text-2xl">
	900
	</a>
	<a href="#" className="no-underline text-white text-lg">
	Total Users
	</a>
	</div>
	</div>
	<div className="shadow bg-success border-l-8 hover:bg-success-dark border-success-dark mb-2 p-2 md:w-1/4 mx-2">
	<div className="p-4 flex flex-col">
	<a href="#" className="no-underline text-white text-2xl">
	500
	</a>
	<a href="#" className="no-underline text-white text-lg">
	Total Products
	</a>
	</div>
	</div>
	</div>
	{/* /Stats Row Ends Here */}
	{/* Card Sextion Starts Here */}
	<div className="flex flex-1 flex-col md:flex-row lg:flex-row mx-2">
	{/* card */}
	<div className="rounded overflow-hidden shadow bg-white mx-2 w-full">
	<div className="px-6 py-2 border-b border-light-grey">
	<div className="font-bold text-xl">Trending Categories</div>
	</div>
	<div className="table-responsive">
	<table className="table text-grey-darkest">
	<thead className="bg-grey-dark text-white text-normal">
	<tr>
	<th scope="col">#</th>
	<th scope="col">Item</th>
	<th scope="col">Last</th>
	<th scope="col">Current</th>
	<th scope="col">Change</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<th scope="row">1</th>
	<td>
	<button className="bg-blue-500 hover:bg-blue-800 text-white font-light py-1 px-2 rounded-full">
	Twitter
	</button>
	</td>
	<td>4500</td>
	<td>4600</td>
	<td>
	<span className="text-green-500"><i className="fas fa-arrow-up" />5%</span>
	</td>
	</tr>
	<tr>
	<th scope="row">2</th>
	<td>
	<button className="bg-primary hover:bg-primary-dark text-white font-light py-1 px-2 rounded-full">
	Facebook
	</button>
	</td>
	<td>10000</td>
	<td>3000</td>
	<td>
	<span className="text-red-500"><i className="fas fa-arrow-down" />65%</span>
	</td>
	</tr>
	<tr>
	<th scope="row">3</th>
	<td>
	<button className="bg-success hover:bg-success-dark text-white font-light py-1 px-2 rounded-full">
	Amazon
	</button>
	</td>
	<td>10000</td>
	<td>3000</td>
	<td>
	<span className="text-red-500"><i className="fas fa-arrow-down" />65%</span>
	</td>
	</tr>
	<tr>
	<th scope="row">4</th>
	<td>
	<button className="bg-blue-500 hover:bg-blue-800 text-white font-light py-1 px-2 rounded-full">
	Microsoft
	</button>
	</td>
	<td>10000</td>
	<td>3000</td>
	<td>
	<span className="text-green-500"><i className="fas fa-arrow-up" />65%</span>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	{/* /card */}
	</div>
	{/* /Cards Section Ends Here */}
	{/* Progress Bar */}
	<div className="flex flex-1 flex-col md:flex-row lg:flex-row mx-2 mt-2">
	<div className="rounded overflow-hidden shadow bg-white mx-2 w-full pt-2">
	<div className="px-6 py-2 border-b border-light-grey">
	<div className="font-bold text-xl">Progress Among Projects</div>
	</div>
	<div className>
	<div className="w-full">
	<div className="shadow w-full bg-grey-light">
	<div className="bg-blue-500 text-xs leading-none py-1 text-center text-white" style={{ width: '45%' }}>45%
	</div>
	</div>
	<div className="shadow w-full bg-grey-light mt-2">
	<div className="bg-teal-500 text-xs leading-none py-1 text-center text-white" style={{ width: '55%' }}>55%
	</div>
	</div>
	<div className="shadow w-full bg-grey-light mt-2">
	<div className="bg-orange-500 text-xs leading-none py-1 text-center text-white" style={{ width: '65%' }}>65%
	</div>
	</div>
	<div className="shadow w-full bg-grey-300 mt-2">
	<div className="bg-red-800 text-xs leading-none py-1 text-center text-white" style={{ width: '75%' }}>75%
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	{/Profile Tabs/}
	<div className="flex flex-1 flex-col md:flex-row lg:flex-row mx-2 p-1 mt-2 mx-auto lg:mx-2 md:mx-2 justify-between">
	{/Top user 1/}
	<div className="rounded rounded-t-lg overflow-hidden shadow max-w-xs my-3">
	<img src="https://i.imgur.com/w1Bdydo.jpg" className="w-full" />
	<div className="flex justify-center -mt-8">
	<img src="https://i.imgur.com/8Km9tLL.jpg" className="rounded-full border-solid border-white border-2 -mt-3" />
	</div>
	<div className="text-center px-3 pb-6 pt-2">
	<h3 className="text-black text-sm bold font-sans">Olivia Dunham</h3>
	<p className="mt-2 font-sans font-light text-grey-700">Hello, i'm from another the other
	side!</p>
	</div>
	<div className="flex justify-center pb-3 text-grey-dark">
	<div className="text-center mr-3 border-r pr-3">
	<h2>34</h2>
	<span>Photos</span>
	</div>
	<div className="text-center">
	<h2>42</h2>
	<span>Friends</span>
	</div>
	</div>
	</div>
	{/Top user 2/}
	<div className="rounded rounded-t-lg overflow-hidden shadow max-w-xs my-3">
	<img src="https://i.imgur.com/w1Bdydo.jpg" className="w-full" />
	<div className="flex justify-center -mt-8">
	<img src="https://i.imgur.com/8Km9tLL.jpg" className="rounded-full border-solid border-white border-2 -mt-3" />
	</div>
	<div className="text-center px-3 pb-6 pt-2">
	<h3 className="text-black text-sm bold font-sans">Olivia Dunham</h3>
	<p className="mt-2 font-sans font-light text-grey-dark">Hello, i'm from another the other
	side!</p>
	</div>
	<div className="flex justify-center pb-3 text-grey-dark">
	<div className="text-center mr-3 border-r pr-3">
	<h2>34</h2>
	<span>Photos</span>
	</div>
	<div className="text-center">
	<h2>42</h2>
	<span>Friends</span>
	</div>
	</div>
	</div>
	{/Top user 3/}
	<div className="rounded rounded-t-lg overflow-hidden shadow max-w-xs my-3">
	<img src="https://i.imgur.com/w1Bdydo.jpg" className="w-full" />
	<div className="flex justify-center -mt-8">
	<img src="https://i.imgur.com/8Km9tLL.jpg" className="rounded-full border-solid border-white border-2 -mt-3" />
	</div>
	<div className="text-center px-3 pb-6 pt-2">
	<h3 className="text-black text-sm bold font-sans">Olivia Dunham</h3>
	<p className="mt-2 font-sans font-light text-grey-dark">Hello, i'm from another the other
	side!</p>
	</div>
	<div className="flex justify-center pb-3 text-grey-dark">
	<div className="text-center mr-3 border-r pr-3">
	<h2>34</h2>
	<span>Photos</span>
	</div>
	<div className="text-center">
	<h2>42</h2>
	<span>Friends</span>
	</div>
	</div>
	</div>
	</div>
	{//Profile Tabs/}
	</div>
	</main>
	{//Main/}
	</div>
	{/Footer/}
	<footer className="bg-grey-darkest text-white p-2">
	<div className="flex flex-1 mx-auto">© My Design</div>
	</footer>
	{//footer/}
	</div>
	</div>

	);
	}

	const rootElement = document.getElementById("root");
	ReactDOM.render(<App />, rootElement);

view raw index.js hosted with ❤ by GitHub

	@tailwind base;

	@tailwind components;

	@tailwind utilities;

	.main-nav {
	@apply flex items-center .justify-between flex-wrap .bg-grey-darkest .p-4 .inset-0;
	}

	.main-logo {
	@apply block flex items-center flex-shrink-0 text-white;
	}

	.menu-item {
	@apply no-underline block p-4 text-grey-darker;
	}

	html{
	line-height: normal;
	}
	h1{
	@apply text-xl font-semibold;
	}


	html{
	line-height: normal;
	}

	/* ###### Modal ###### */


	.modal-wrapper {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	visibility: hidden;
	opacity: 0;
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0;
	-webkit-transition: opacity 400ms;
	transition: opacity 400ms;
	}

	.modal {
	position: relative;
	width: auto;
	margin: .5rem;
	pointer-events: none;
	-webkit-transform: translateY(-20%);
	-o-transform: translateY(-20%);
	transform: translateY(-20%);
	-webkit-transition: 300ms;
	transition: 300ms;
	}

	.modal-wrapper .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: -1;
	}

	.modal-is-open{
	visibility: visible;
	opacity: 1;
	}
	.modal-is-open > .modal{
	-webkit-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0)
	}

	.modal-centered {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	min-height: calc(100% - (.5rem * 2));
	}

	@media (min-width: 576px){
	.modal{
	max-width: 500px;
	margin: 1.75rem auto;
	}
	.modal.modal-lg{ max-width: 800px !important }
	.modal-centered { min-height: calc(100% - (1.75rem * 2)) }
	}

	.modal-content {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3rem;
	outline: 0;
	}

view raw style.css hosted with ❤ by GitHub

	const express = require('express');
	const path = require("path");

	const app = express();

	const webpack = require('webpack');
	const webpackMiddleware = require('webpack-dev-middleware');
	const webpackConfig = require('./webpack.config.js');

	app.use(webpackMiddleware(webpack(webpackConfig)));

	app.get("/", (req, res) => {
	const indexFile = "index.html";
	res.sendFile(indexFile, {
	root: path.join(__dirname, "client")
	});
	});

	app.listen(process.env.PORT \|\| 8080,
	() => console.log(`Listening on port ${process.env.PORT \|\| 8080}!`));

view raw server.js hosted with ❤ by GitHub

	const path = require('path');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const MiniCssExtractPlugin = require('mini-css-extract-plugin');

	module.exports = {
	entry: path.join(__dirname,'client','index.js'),
	output: {
	path: path.join(__dirname,'build'),
	filename: 'index.bundle.js'
	},
	mode: process.env.NODE_ENV \|\| 'development',
	resolve: {
	modules: [path.resolve(__dirname, 'client'), 'node_modules']
	},
	devServer: {
	contentBase: path.join(__dirname,'client')
	},
	module: {
	rules: [
	{
	test: /\.(js\|jsx)$/,
	exclude: /node_modules/,
	use: ['babel-loader']
	},
	{
	test: /\.(css\|scss)$/,
	use: [
	MiniCssExtractPlugin.loader,
	"css-loader",
	"postcss-loader",
	]
	},
	{
	test: /\.(jpg\|jpeg\|png\|gif\|mp3\|svg)$/,
	loaders: ['file-loader']
	}
	]
	},
	plugins: [
	new MiniCssExtractPlugin({
	filename: 'style.css',
	chunkFilename: 'style.css'
	}),
	new HtmlWebpackPlugin({
	template: path.join(__dirname,'client','index.html')
	}),
	]
	};

view raw webpack.config.js hosted with ❤ by GitHub

	{
	"presets": ["@babel/preset-env", "@babel/preset-react"]
	}

view raw .babelrc hosted with ❤ by GitHub

	const tailwindcss = require('tailwindcss');
	const purgecss = require('@fullhuman/postcss-purgecss')({
	// Specify the paths to all of the template files in your project
	content: [
	'./public/*/.html',
	'./src/*/.js',
	// etc.
	],

	// Include any special characters you're using in this regular expression
	defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) \|\| []
	});

	module.exports = {
	plugins: [
	require('postcss-import'),
	tailwindcss('./tailwind.config.js'),
	require('autoprefixer'),
	...process.env.NODE_ENV === 'production' ? [purgecss] : []
	],
	};

view raw postcss.config.js hosted with ❤ by GitHub

	let colors = {
	'grey-darkest': '#3d4852',
	'grey-darker': '#606f7b',
	'grey-dark': '#8795a1',
	'grey': '#b8c2cc',
	'grey-light': '#dae1e7',
	'grey-lighter': '#f1f5f8',
	'grey-lightest': '#f8fafc',
	'grey-mid-light': '#f3f3f4',
	'white-lightest': '#f4f4f4',

	'red-darkest': '#3b0d0c',
	'red-darker': '#621b18',
	'red-dark': '#cc1f1a',
	'red-light': '#ef5753',
	'red-lighter': '#f9acaa',
	'red-lightest': '#fcebea',

	'orange-darkest': '#462a16',
	'orange-darker': '#613b1f',
	'orange-dark': '#de751f',
	'orange-light': '#faad63',
	'orange-lighter': '#fcd9b6',
	'orange-lightest': '#fff5eb',

	'yellow-darkest': '#453411',
	'yellow-darker': '#684f1d',
	'yellow-dark': '#f2d024',
	'yellow-light': '#fff382',
	'yellow-lighter': '#fff9c2',
	'yellow-lightest': '#fcfbeb',

	'green-darkest': '#0f2f21',
	'green-darker': '#1a4731',
	'green-dark': '#1f9d55',
	'green-light': '#51d88a',
	'green-lighter': '#a2f5bf',
	'green-lightest': '#e3fcec',

	'teal-darkest': '#0d3331',
	'teal-darker': '#20504f',
	'teal-dark': '#38a89d',
	'teal-light': '#64d5ca',
	'teal-lighter': '#a0f0ed',
	'teal-lightest': '#e8fffe',

	'blue-darkest': '#12283a',
	'blue-darker': '#1c3d5a',
	'blue-dark': '#2779bd',
	'blue-light': '#6cb2eb',
	'blue-lighter': '#bcdefa',
	'blue-lightest': '#eff8ff',

	'indigo-darkest': '#191e38',
	'indigo-darker': '#2f365f',
	'indigo-dark': '#5661b3',
	'indigo-light': '#7886d7',
	'indigo-lighter': '#b2b7ff',
	'indigo-lightest': '#e6e8ff',

	'purple-darkest': '#21183c',
	'purple-darker': '#382b5f',
	'purple-dark': '#794acf',
	'purple-light': '#a779e9',
	'purple-lighter': '#d6bbfc',
	'purple-lightest': '#f3ebff',

	'pink-darkest': '#451225',
	'pink-darker': '#6f213f',
	'pink-dark': '#eb5286',
	'pink-light': '#fa7ea8',
	'pink-lighter': '#ffbbca',
	'pink-lightest': '#ffebef',

	'nav': '#3F495E',
	'side-nav': '#ECF0F1',
	'nav-item': '#626b7a',
	'light-border' : '#dfe4e6',
	'white-medium': '#FAFAFA',
	'white-medium-dark': '#E5E9EB',
	'red-vibrant': '#e46050',
	'red-vibrant-dark': '#d64230',
	'primary': '#51BE99',
	'primary-dark': '#0e5f43',
	'warning': '#f4ab43',
	'warning-dark': '#c37c16',
	'black-dark': '#272634',
	'black-darkest': '#141418',
	'info': '#52bcdc',
	'info-dark': '#2cadd4',
	'success': '#72b159',
	'success-dark': '#5D9547',

	transparent: 'transparent',

	black: '#000',
	white: '#fff',

	gray: {
	100: '#f7fafc',
	200: '#edf2f7',
	300: '#e2e8f0',
	400: '#cbd5e0',
	500: '#a0aec0',
	600: '#718096',
	700: '#4a5568',
	800: '#2d3748',
	900: '#1a202c',
	},
	red: {
	100: '#fff5f5',
	200: '#fed7d7',
	300: '#feb2b2',
	400: '#fc8181',
	500: '#f56565',
	600: '#e53e3e',
	700: '#c53030',
	800: '#9b2c2c',
	900: '#742a2a',
	},
	orange: {
	100: '#fffaf0',
	200: '#feebc8',
	300: '#fbd38d',
	400: '#f6ad55',
	500: '#ed8936',
	600: '#dd6b20',
	700: '#c05621',
	800: '#9c4221',
	900: '#7b341e',
	},
	yellow: {
	100: '#fffff0',
	200: '#fefcbf',
	300: '#faf089',
	400: '#f6e05e',
	500: '#ecc94b',
	600: '#d69e2e',
	700: '#b7791f',
	800: '#975a16',
	900: '#744210',
	},
	green: {
	100: '#f0fff4',
	200: '#c6f6d5',
	300: '#9ae6b4',
	400: '#68d391',
	500: '#48bb78',
	600: '#38a169',
	700: '#2f855a',
	800: '#276749',
	900: '#22543d',
	},
	teal: {
	100: '#e6fffa',
	200: '#b2f5ea',
	300: '#81e6d9',
	400: '#4fd1c5',
	500: '#38b2ac',
	600: '#319795',
	700: '#2c7a7b',
	800: '#285e61',
	900: '#234e52',
	},
	blue: {
	100: '#ebf8ff',
	200: '#bee3f8',
	300: '#90cdf4',
	400: '#63b3ed',
	500: '#4299e1',
	600: '#3182ce',
	700: '#2b6cb0',
	800: '#2c5282',
	900: '#2a4365',
	},
	indigo: {
	100: '#ebf4ff',
	200: '#c3dafe',
	300: '#a3bffa',
	400: '#7f9cf5',
	500: '#667eea',
	600: '#5a67d8',
	700: '#4c51bf',
	800: '#434190',
	900: '#3c366b',
	},
	purple: {
	100: '#faf5ff',
	200: '#e9d8fd',
	300: '#d6bcfa',
	400: '#b794f4',
	500: '#9f7aea',
	600: '#805ad5',
	700: '#6b46c1',
	800: '#553c9a',
	900: '#44337a',
	},
	pink: {
	100: '#fff5f7',
	200: '#fed7e2',
	300: '#fbb6ce',
	400: '#f687b3',
	500: '#ed64a6',
	600: '#d53f8c',
	700: '#b83280',
	800: '#97266d',
	900: '#702459',
	},
	};

	module.exports = {
	prefix: '',
	important: false,
	separator: ':',
	theme: {
	screens: {
	sm: '640px',
	md: '768px',
	lg: '1024px',
	xl: '1280px',
	},
	colors: colors,
	spacing: {
	px: '1px',
	'0': '0',
	'1': '0.25rem',
	'2': '0.5rem',
	'3': '0.75rem',
	'4': '1rem',
	'5': '1.25rem',
	'6': '1.5rem',
	'8': '2rem',
	'10': '2.5rem',
	'12': '3rem',
	'16': '4rem',
	'20': '5rem',
	'24': '6rem',
	'32': '8rem',
	'40': '10rem',
	'48': '12rem',
	'56': '14rem',
	'64': '16rem',
	},
	margin: {
	'auto': 'auto',
	'px': '1px',
	'0': '0',
	'1': '0.25rem',
	'2': '0.5rem',
	'3': '0.75rem',
	'4': '1rem',
	'5': '1.25rem',
	'6': '1.5rem',
	'8': '2rem',
	'10': '2.5rem',
	'12': '3rem',
	'16': '4rem',
	'20': '5rem',
	'24': '6rem',
	'32': '8rem',
	'-px': '-1px',
	'-1': '-0.25rem',
	'-2': '-0.5rem',
	'-3': '-0.75rem',
	'-4': '-1rem',
	'-5': '-1.25rem',
	'-6': '-1.5rem',
	'-8': '-2rem',
	'-10': '-2.5rem',
	'-12': '-3rem',
	'-16': '-4rem',
	'-20': '-5rem',
	'-24': '-6rem',
	'-32': '-8rem',
	},
	},
	variants: {
	appearance: ['responsive'],
	zIndex: ['responsive'],
	},
	plugins: [
	require('tailwindcss-tables')()
	],
	};