add tailwindcss

.eslintrc.js

@@ -28,13 +28,14 @@ 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/explicit-module-boundary-types': 'off',
 	},
 	overrides: [
 		// Override some TypeScript rules just for .js files
 		{
 			files: ['*.js'],
 			rules: {
-				'@typescript-eslint/no-var-requires': 'off', //
+				'@typescript-eslint/no-var-requires': 'off',
 			},
 		},
 	],

babel-plugin-macros.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	twin: {
+		config: 'tailwind.config.js',
+		preset: 'emotion',
+		debugProp: true,
+		debugPlugins: false,
+		debug: false,
+	},
+};

gatsby-browser.js

@@ -5,3 +5,5 @@
  */
 
 // You can delete this file if you're not using it
+
+import 'tailwindcss/dist/base.min.css';

gatsby-config.js

@@ -1,34 +1,35 @@
 module.exports = {
-  siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
-  },
-  plugins: [
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
-    },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
-      },
-    },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
-  ],
-}
+	siteMetadata: {
+		title: `Gatsby Default Starter`,
+		description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
+		author: `@gatsbyjs`,
+	},
+	plugins: [
+		`gatsby-plugin-emotion`,
+		`gatsby-plugin-react-helmet`,
+		{
+			resolve: `gatsby-source-filesystem`,
+			options: {
+				name: `images`,
+				path: `${__dirname}/src/images`,
+			},
+		},
+		`gatsby-transformer-sharp`,
+		`gatsby-plugin-sharp`,
+		{
+			resolve: `gatsby-plugin-manifest`,
+			options: {
+				name: `gatsby-starter-default`,
+				short_name: `starter`,
+				start_url: `/`,
+				background_color: `#663399`,
+				theme_color: `#663399`,
+				display: `minimal-ui`,
+				icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+			},
+		},
+		// this (optional) plugin enables Progressive Web App + Offline functionality
+		// To learn more, visit: https://gatsby.dev/offline
+		// `gatsby-plugin-offline`,
+	],
+};