feat: add TailwindCSS (Shopify#13)

## Context

Added TailwindCSS to Hydrogen

## Changes

Add `tailwind.config.ts`

## Paperwork

[SCH-10](https://codeinternetapplications.atlassian.net/browse/SCH-10)

## Checklist

- [x] My code follows the style guidelines of this project
- [x] I've performed a self-review of my own code
- [x] I've added a changeset if this PR contains user-facing or
noteworthy changes
- [x] I've commented my code, particularly in hard-to-understand areas
- [x] I've made corresponding changes to the documentation
- [x] I've tested my code for breaking changes and added the
corresponding
      footer in this PR if needed

Author: remcolakens

apps/cbt-hydrogen/app/root.tsx

@@ -9,7 +9,7 @@ import {
 import type {Shop} from '@shopify/hydrogen/storefront-api-types';
 import {type LinksFunction, type LoaderArgs} from '@shopify/remix-oxygen';
 import favicon from '../public/favicon.svg';
-import styles from './styles/app.css';
+import styles from './styles/tailwind.css';
 
 export const links: LinksFunction = () => {
 	return [

apps/cbt-hydrogen/app/routes/_index.tsx

@@ -1,3 +1,36 @@
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from '@code-internet-applications/react';
+
 export default function Homepage() {
-	return <h1>Hello CODE.</h1>;
+	return (
+		<>
+			<p className="mb-8">Hello CODE.</p>
+
+			<Accordion type="single" collapsible className="w-full">
+				<AccordionItem value="item-1">
+					<AccordionTrigger>Is it accessible?</AccordionTrigger>
+					<AccordionContent>
+						Yes. It adheres to the WAI-ARIA design pattern.
+					</AccordionContent>
+				</AccordionItem>
+				<AccordionItem value="item-2">
+					<AccordionTrigger>Is it styled?</AccordionTrigger>
+					<AccordionContent>
+						Yes. It comes with default styles that matches the other components
+						aesthetic.
+					</AccordionContent>
+				</AccordionItem>
+				<AccordionItem value="item-3">
+					<AccordionTrigger>Is it animated?</AccordionTrigger>
+					<AccordionContent>
+						Yes. Its animated by default, but you can disable it if you prefer.
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</>
+	);
 }

apps/cbt-hydrogen/app/styles/app.css

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

apps/cbt-hydrogen/app/styles/tailwind.css

@@ -13,6 +13,7 @@
 	},
 	"prettier": "@shopify/prettier-config",
 	"dependencies": {
+		"@code-internet-applications/react": "workspace:*",
 		"@remix-run/react": "1.15.0",
 		"@shopify/cli": "3.45.0",
 		"@shopify/cli-hydrogen": "^4.2.1",
@@ -23,6 +24,7 @@
 		"isbot": "^3.6.10"
 	},
 	"devDependencies": {
+		"@code-internet-applications/tsconfig": "workspace:*",
 		"@remix-run/dev": "1.15.0",
 		"@shopify/oxygen-workers-types": "^3.17.2",
 		"@shopify/prettier-config": "^1.1.2",

apps/cbt-hydrogen/package.json

@@ -2,7 +2,11 @@
 module.exports = {
 	appDirectory: 'app',
 	ignoredRouteFiles: ['**/.*'],
-	watchPaths: ['./public'],
+	watchPaths: [
+		'./public',
+		'../../packages/**/**/*.{js,ts,jsx,tsx,mdx}',
+		'../../packages/**/**/**/*.{js,ts,jsx,tsx,mdx}',
+	],
 	server:
 		process.env.NODE_ENV === 'development' ? './server-dev.ts' : './server.ts',
 	/**
@@ -18,6 +22,7 @@ module.exports = {
 	serverPlatform: 'neutral',
 	serverMinify: process.env.NODE_ENV === 'production',
 	future: {
+		unstable_tailwind: true,
 		v2_meta: true,
 		v2_errorBoundary: true,
 		v2_routeConvention: true,

apps/cbt-hydrogen/remix.config.js

@@ -23,12 +23,14 @@ export default async function (request: Request): Promise<Response> {
 			PUBLIC_STORE_DOMAIN: '',
 			PUBLIC_STOREFRONT_ID: '',
 		};
-		env.SESSION_SECRET = process.env.SESSION_SECRET;
-		env.PUBLIC_STOREFRONT_API_TOKEN = process.env.PUBLIC_STOREFRONT_API_TOKEN;
-		env.PRIVATE_STOREFRONT_API_TOKEN = process.env.PRIVATE_STOREFRONT_API_TOKEN;
-		env.PUBLIC_STOREFRONT_API_VERSION =
-			process.env.PUBLIC_STOREFRONT_API_VERSION;
-		env.PUBLIC_STORE_DOMAIN = process.env.PUBLIC_STORE_DOMAIN;
+		env.SESSION_SECRET = process.env.SESSION_SECRET as string;
+		env.PUBLIC_STOREFRONT_API_TOKEN = process.env
+			.PUBLIC_STOREFRONT_API_TOKEN as string;
+		env.PRIVATE_STOREFRONT_API_TOKEN = process.env
+			.PRIVATE_STOREFRONT_API_TOKEN as string;
+		env.PUBLIC_STOREFRONT_API_VERSION = process.env
+			.PUBLIC_STOREFRONT_API_VERSION as string;
+		env.PUBLIC_STORE_DOMAIN = process.env.PUBLIC_STORE_DOMAIN as string;
 
 		/**
 		 * Open a cache instance in the worker and a custom session instance.
@@ -38,7 +40,7 @@ export default async function (request: Request): Promise<Response> {
 		}
 
 		const [session] = await Promise.all([
-			HydrogenSession.init(request, [process.env.SESSION_SECRET]),
+			HydrogenSession.init(request, [process.env.SESSION_SECRET as string]),
 		]);
 
 		/**

apps/cbt-hydrogen/server.ts

@@ -0,0 +1,11 @@
+import type {Config} from 'tailwindcss';
+import {tailwindConfig} from '../../packages/config/tailwind-config/tailwind.config';
+
+export default {
+	presets: [tailwindConfig],
+	content: [
+		'../../packages/**/**/*.{js,ts,jsx,tsx,mdx}',
+		'../../packages/**/**/**/*.{js,ts,jsx,tsx,mdx}',
+		'./app/**/*.{js,jsx,ts,tsx}',
+	],
+} satisfies Config;

apps/cbt-hydrogen/tailwind.config.ts

@@ -1,4 +1,5 @@
 {
+	"extends": "@code-internet-applications/tsconfig",
 	"include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"],
 	"compilerOptions": {
 		"lib": ["DOM", "DOM.Iterable", "ES2022"],
@@ -13,7 +14,7 @@
 		"forceConsistentCasingInFileNames": true,
 		"skipLibCheck": true,
 		"baseUrl": ".",
-		"types": ["@shopify/oxygen-workers-types"],
+		"types": ["@shopify/oxygen-workers-types", "node"],
 		"paths": {
 			"~/*": ["app/*"]
 		},