add raw css classes

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
 	rules: {
 		'react/prop-types': 'off', // Disable prop-types as we use TypeScript for type checking
 		'@typescript-eslint/explicit-function-return-type': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
 		'@typescript-eslint/explicit-module-boundary-types': 'off',
 	},
 	overrides: [

gatsby-browser.js

@@ -1,11 +1 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
-
-// You can delete this file if you're not using it
-
-import 'tailwindcss/dist/base.min.css';
-import 'tailwindcss/dist/components.css';
-import 'tailwindcss/dist/utilities.css';
+import './src/index.css';

gatsby-config.js

@@ -5,6 +5,7 @@ module.exports = {
 		author: `@gatsbyjs`,
 	},
 	plugins: [
+		`gatsby-plugin-postcss`,
 		`gatsby-plugin-emotion`,
 		`gatsby-plugin-react-helmet`,
 		{

package.json

@@ -23,11 +23,13 @@
     "@emotion/styled": "^10.0.27",
     "@typescript-eslint/eslint-plugin": "^3.8.0",
     "@typescript-eslint/parser": "^3.8.0",
+    "autoprefixer": "^9.8.6",
     "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
     "gatsby-plugin-emotion": "^4.3.10",
+    "gatsby-plugin-postcss": "^2.3.11",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
     "prettier": "2.0.5",

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = () => ({
+	plugins: [require('tailwindcss'), require('autoprefixer')],
+});

src/components/home/Headline.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import tw, { styled } from 'twin.macro';
+import { Button } from '~/components/ui/controls/Button';
 
-const HeadlineContainer = styled.div`
-	${tw`flex justify-between`}
+const Root = styled.header`
+	${tw`bg-gray-200 py-5`}
 `;
+
+const Container = styled.div`
+	${tw`container flex justify-between items-center`}
+`;
+
 export default function Headline() {
 	return (
-		<HeadlineContainer>
-			<span>Here</span>
-			<div>Another one</div>
-		</HeadlineContainer>
+		<Root>
+			<Container>
+				<span>Here</span>
+				<Button>CONTACT ME</Button>
+			</Container>
+		</Root>
 	);
 }

src/components/ui/controls/Button.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import 'twin.macro';
+
+type Props = {
+	size?: 'sm' | 'lg';
+	bgColor?: string;
+	rounded?: boolean;
+	textColor?: string;
+	children: any;
+};
+export const Button: React.FC<Props> = ({
+	size = 'sm',
+	bgColor = 'cta',
+	textColor = 'white',
+	children,
+	rounded = true,
+}) => {
+	const sizeClass =
+		{
+			sm: 'text-xs',
+			lg: 'text-xl',
+		}[size] || '';
+
+	let bgClass = '';
+	if (bgColor) {
+		bgClass = `bg-${bgColor}`;
+	}
+
+	return (
+		<button
+			className={`${bgClass} text-${textColor} ${sizeClass} font-semibold py-2 px-4 ${
+				rounded ? 'rounded' : ''
+			}`}
+		>
+			{children}
+		</button>
+	);
+};

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -1,7 +1,23 @@
 module.exports = {
 	purge: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx'],
 	theme: {
-		extend: {},
+		extend: {
+			colors: {
+				secondary: '#d1e0f4',
+				primary: '#0288d1',
+				cta: '#d10220',
+				info: '#2ecbf6',
+				warning: '#e4ca52',
+				success: '#49d96a',
+				danger: '#e75160',
+			},
+		},
+		container: {
+			center: true,
+		},
+	},
+	corePlugins: {
+		container: true,
 	},
 	variants: {},
 	plugins: [],