Tailwind config customizations

Author: realstoman

src/App.js

@@ -1,23 +1,10 @@
-import logo from './logo.svg';
 import './css/App.css';
+import AppHeader from './components/AppHeader';
 
 function App() {
 	return (
 		<div className="App">
-			<header className="App-header">
-				<img src={logo} className="App-logo" alt="logo" />
-				<p className="text-gray-400 font-semibold">
-					Edit <code>src/App.js</code> and save to reload.
-				</p>
-				<a
-					className="App-link"
-					href="https://reactjs.org"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					Learn React
-				</a>
-			</header>
+			<AppHeader></AppHeader>
 		</div>
 	);
 }

src/index.js

@@ -5,10 +5,10 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

tailwind.config.js

@@ -1,11 +1,32 @@
+const colors = require('tailwindcss/colors');
+
 module.exports = {
 	purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
-	darkMode: false, // or 'media' or 'class'
+	darkMode: 'class',
 	theme: {
-		extend: {},
+		extend: {
+			colors: {
+				'primary-light': '#F7F8FC',
+				'secondary-light': '#FFFFFF',
+				'ternary-light': '#f6f7f8',
+
+				'primary-dark': '#0D2438',
+				'secondary-dark': '#102D44',
+				'ternary-dark': '#1E3851',
+			},
+			container: {
+				padding: {
+					DEFAULT: '1rem',
+					sm: '2rem',
+					lg: '5rem',
+					xl: '6rem',
+					'2xl': '8rem',
+				},
+			},
+		},
 	},
 	variants: {
-		extend: {},
+		extend: { opacity: ['disabled'] },
 	},
 	plugins: [],
 };