add relative import support

gatsby-browser.js

@@ -7,3 +7,5 @@
 // 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';

gatsby-node.js

@@ -1,7 +1,11 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
+const path = require('path');
 
-// You can delete this file if you're not using it
+exports.onCreateWebpackConfig = ({ actions }) => {
+	actions.setWebpackConfig({
+		resolve: {
+			alias: {
+				'~': path.resolve(__dirname, 'src'),
+			},
+		},
+	});
+};

package.json

@@ -33,7 +33,8 @@
     "prettier": "2.0.5",
     "tailwindcss": "^1.6.2",
     "twin.macro": "^1.7.0",
-    "typescript": "^3.9.7"
+    "typescript": "^3.9.7",
+    "typescript-plugin-tw-template": "^2.0.1"
   },
   "keywords": [
     "gatsby"

src/components/home/Headline.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import tw, { styled } from 'twin.macro';
+
+const HeadlineContainer = styled.div`
+	${tw`flex justify-between`}
+`;
+export default function Headline() {
+	return (
+		<HeadlineContainer>
+			<span>Here</span>
+			<div>Another one</div>
+		</HeadlineContainer>
+	);
+}

src/pages/index.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
-import tw from 'twin.macro';
-
-// or use the shorthand version
-
-const Button = tw.button`
-  bg-blue-500 hover:bg-blue-800 text-white p-2 rounded
-`;
+import Headline from '~/components/home/Headline';
 
 const IndexPage = () => (
 	<div>
-		<h1>Hi people</h1>
-		<Button>Activate</Button>
+		<Headline />
 	</div>
 );
 

src/twin.d.ts

@@ -0,0 +1,8 @@
+import 'twin.macro';
+import styledComponent from '@emotion/styled';
+import { css as cssProperty } from '@emotion/core';
+
+declare module 'twin.macro' {
+	export const css: typeof cssProperty;
+	export const styled: typeof styledComponent;
+}

tsconfig.json

@@ -1,14 +1,22 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "commonjs",
-    "jsx": "preserve",
-    "declaration": true,
-    "strict": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "noEmit": true,
-    "isolatedModules": true
-  },
-  "exclude": ["node_modules", "public", ".cache"]
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "commonjs",
+		"jsx": "preserve",
+		"declaration": true,
+		"strict": true,
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"noEmit": true,
+		"skipLibCheck": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"isolatedModules": false,
+		"plugins": [{ "name": "typescript-plugin-tw-template" }],
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["./src/*"]
+		}
+	},
+	"exclude": ["node_modules", "public", ".cache"]
 }