Move from SCSS to Tailwind

.gitignore

@@ -3,3 +3,6 @@ node_modules
 
 # OS
 .DS_Store
+
+# Build output
+dist

.vscode/settings.json

@@ -1,6 +1,12 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

astro.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
+import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react()],
+  integrations: [react(), tailwind()],
 });

package.json

@@ -5,20 +5,19 @@
   "private": true,
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "devDependencies": {
     "@astrojs/react": "^1.0.0",
+    "@astrojs/tailwind": "^1.0.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "astro": "^1.0.8",
+    "clsx": "^1.2.1",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.54.5",
-    "typescript-plugin-css-modules": "^3.4.0"
+    "react-dom": "^18.2.0"
   }
 }

src/components/labelled-value.tsx

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import clsx from 'clsx';
+
+interface LabelledValueProps extends ComponentPropsWithoutRef<'div'> {
+  label: string;
+}
+
+export const LabelledValue = ({ label, children, className, ...props }: LabelledValueProps) => (
+  <div className={clsx('text-base space-x-1', className)} {...props}>
+    <span className="font-medium text-gray-700">{label}:</span>
+    <span className="font-normal text-gray-500">{children}</span>
+  </div>
+);

src/components/section-card.tsx

@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import type { ComponentPropsWithoutRef } from 'react';
+
+interface SectionCardProps extends ComponentPropsWithoutRef<'div'> {}
+
+export const SectionCard = ({ className, ...props }: SectionCardProps) => (
+  <div className={clsx('p-8 bg-white rounded-2xl shadow-lg', className)} {...props} />
+);

src/components/section-card/index.ts

@@ -1 +0,0 @@
-export * from './section-card';

src/components/section-card/section-card.module.scss

@@ -1,6 +0,0 @@
-.sectionCard {
-  padding: 32px;
-  background: var(--white);
-  border-radius: 16px;
-  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
-}

src/components/section-card/section-card.tsx

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './section-card.module.scss';
-
-export const SectionCard = ({ children }: { children: ReactNode }) => (
-  <div className={styles.sectionCard}>{children}</div>
-);

src/components/typography/content/content.module.scss

@@ -1,6 +0,0 @@
-.content {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 28px;
-  color: var(--text-secondary);
-}

src/components/typography/content/content.tsx

@@ -1,3 +0,0 @@
-import styles from './content.module.scss';
-
-export const Content = ({ children }: { children: string }) => <p className={styles.content}>{children}</p>;

src/components/typography/content/index.ts

@@ -1 +0,0 @@
-export * from './content';

src/components/typography/item-description/index.ts

@@ -1 +0,0 @@
-export * from './item-description';

src/components/typography/item-description/item-description.module.scss

@@ -1,6 +0,0 @@
-.itemDescription {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--text-secondary);
-}

src/components/typography/item-description/item-description.tsx

@@ -1,5 +0,0 @@
-import styles from './item-description.module.scss';
-
-export const ItemDescription = ({ children }: { children: string }) => (
-  <p className={styles.itemDescription}>{children}</p>
-);

src/components/typography/item-subtitle/index.ts

@@ -1 +0,0 @@
-export * from './item-subtitle';

src/components/typography/item-subtitle/item-subtitle.module.scss

@@ -1,6 +0,0 @@
-.itemSubtitle {
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--text-primary);
-}

src/components/typography/item-subtitle/item-subtitle.tsx

@@ -1,3 +0,0 @@
-import styles from './item-subtitle.module.scss';
-
-export const ItemSubtitle = ({ children }: { children: string }) => <p className={styles.itemSubtitle}>{children}</p>;

src/components/typography/item-title/index.ts

@@ -1 +0,0 @@
-export * from './item-title';

src/components/typography/item-title/item-title.module.scss

@@ -1,6 +0,0 @@
-.itemTitle {
-  font-weight: 800;
-  font-size: 20px;
-  line-height: 28px;
-  color: var(--text-title);
-}

src/components/typography/item-title/item-title.tsx

@@ -1,3 +0,0 @@
-import styles from './item-Title.module.scss';
-
-export const ItemTitle = ({ children }: { children: string }) => <h4 className={styles.itemTitle}>{children}</h4>;

src/components/typography/labelled-value/index.ts

@@ -1 +0,0 @@
-export * from './labelled-value';

src/components/typography/labelled-value/labelled-value.module.scss

@@ -1,18 +0,0 @@
-.labelledValue {
-  font-size: 16px;
-  line-height: 24px;
-
-  & > * + * {
-    margin-left: 4px;
-  }
-
-  :first-child {
-    font-weight: 500;
-    color: var(--text-primary);
-  }
-
-  :last-child {
-    font-weight: 400;
-    color: var(--text-secondary);
-  }
-}

src/components/typography/labelled-value/labelled-value.tsx

@@ -1,8 +0,0 @@
-import styles from './labelled-value.module.scss';
-
-export const LabelledValue = ({ label, value }: { label: string; value: string }) => (
-  <div className={styles.labelledValue}>
-    <span>{label}:</span>
-    <span>{value}</span>
-  </div>
-);

src/components/typography/main-subtitle/index.ts

@@ -1 +0,0 @@
-export * from './main-subtitle';

src/components/typography/main-subtitle/main-subtitle.module.scss

@@ -1,6 +0,0 @@
-.mainSubtitle {
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 28px;
-  color: var(--text-primary);
-}

src/components/typography/main-subtitle/main-subtitle.tsx

@@ -1,3 +0,0 @@
-import styles from './main-subtitle.module.scss';
-
-export const MainSubtitle = ({ children }: { children: string }) => <h2 className={styles.mainSubtitle}>{children}</h2>;

src/components/typography/main-title/index.ts

@@ -1 +0,0 @@
-export * from './main-title';

src/components/typography/main-title/main-title.module.scss

@@ -1,6 +0,0 @@
-.mainTitle {
-  font-weight: 800;
-  font-size: 36px;
-  line-height: 40px;
-  color: var(--text-title);
-}

src/components/typography/main-title/main-title.tsx

@@ -1,3 +0,0 @@
-import styles from './main-title.module.scss';
-
-export const MainTitle = ({ children }: { children: string }) => <h1 className={styles.mainTitle}>{children}</h1>;

src/components/typography/section-subtitle/index.ts

@@ -1 +0,0 @@
-export * from './section-subtitle';

src/components/typography/section-subtitle/section-subtitle.module.scss

@@ -1,6 +0,0 @@
-.sectionSubtitle {
-  font-weight: 800;
-  font-size: 18px;
-  line-height: 28px;
-  color: var(--text-title);
-}

src/components/typography/section-subtitle/section-subtitle.tsx

@@ -1,5 +0,0 @@
-import styles from './section-subtitle.module.scss';
-
-export const SectionSubtitle = ({ children }: { children: string }) => (
-  <h3 className={styles.sectionSubtitle}>{children}</h3>
-);

src/components/typography/section-title/index.ts

@@ -1 +0,0 @@
-export * from './section-title';

src/components/typography/section-title/section-title.module.scss

@@ -1,6 +0,0 @@
-.sectionTitle {
-  font-weight: 800;
-  font-size: 32px;
-  line-height: 40px;
-  color: var(--text-title);
-}

src/components/typography/section-title/section-title.tsx

@@ -1,3 +0,0 @@
-import styles from './section-title.module.scss';
-
-export const SectionTitle = ({ children }: { children: string }) => <h2 className={styles.sectionTitle}>{children}</h2>;

src/components/typograpy.tsx

@@ -0,0 +1,47 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import clsx from 'clsx';
+
+type TypographyVariant =
+  | 'item-title'
+  | 'item-subtitle'
+  | 'tile-title'
+  | 'tile-subtitle'
+  | 'main-title'
+  | 'main-subtitle'
+  | 'section-title'
+  | 'section-subtitle'
+  | 'paragraph';
+
+interface TypographyProps extends ComponentPropsWithoutRef<'div'> {
+  variant?: TypographyVariant;
+}
+
+const variantToElement = {
+  'main-title': 'h1',
+  'main-subtitle': 'h2',
+  'section-title': 'h2',
+  'section-subtitle': 'h3',
+  'item-title': 'h3',
+  'item-subtitle': 'p',
+  'tile-title': 'h4',
+  'tile-subtitle': 'p',
+  paragraph: 'p',
+} as const;
+
+const variantToClassName = {
+  'main-title': 'text-4xl font-extrabold text-gray-900',
+  'main-subtitle': 'text-lg font-medium text-gray-700',
+  'section-title': 'text-3xl font-extrabold text-gray-900',
+  'section-subtitle': 'text-lg font-extrabold text-gray-900',
+  'item-title': 'text-xl font-extrabold text-gray-900',
+  'item-subtitle': 'text-md font-medium text-gray-700',
+  'tile-title': 'text-sm font-medium text-gray-700',
+  'tile-subtitle': 'text-sm font-normal text-gray-500',
+  paragraph: 'text-base leading-relaxed font-normal text-gray-500',
+};
+
+export const Typography = ({ variant = 'paragraph', className, ...props }: TypographyProps) => {
+  const Element = variantToElement[variant];
+
+  return <Element className={clsx(variantToClassName[variant], className)} {...props} />;
+};

src/pages/index.astro

@@ -1,13 +1,7 @@
 ---
 import { SectionCard } from '../components/section-card';
-import { SectionTitle } from '../components/typography/section-title';
-import { SectionSubtitle } from '../components/typography/section-subtitle';
-import { ItemTitle } from '../components/typography/item-title';
-import { ItemSubtitle } from '../components/typography/item-subtitle';
-import { Content } from '../components/typography/content';
-import { ItemDescription } from '../components/typography/item-description';
-import { MainTitle } from '../components/typography/main-title';
-import { LabelledValue } from '../components/typography/labelled-value';
+import { Typography } from '../components/typograpy';
+import { LabelledValue } from '../components/labelled-value';
 ---
 
 <!DOCTYPE html>
@@ -19,35 +13,20 @@ import { LabelledValue } from '../components/typography/labelled-value';
     <meta name="generator" content={Astro.generator} />
     <title>Welcome to Astro</title>
   </head>
-  <body>
+  <body class="bg-gray-50">
     <main>
       <SectionCard>
-        <MainTitle>Main title</MainTitle>
-        <SectionTitle>Section title</SectionTitle>
-        <SectionSubtitle>Section subtitle</SectionSubtitle>
-        <ItemTitle>Item title</ItemTitle>
-        <ItemSubtitle>Item subtitle</ItemSubtitle>
-        <ItemDescription>Item description</ItemDescription>
-        <Content>Content</Content>
-        <LabelledValue label="Phone" value="+48 604 343 212" />
+        <Typography variant="main-title">Main title</Typography>
+        <Typography variant="main-subtitle">Main subtitle</Typography>
+        <Typography variant="section-title">Section title</Typography>
+        <Typography variant="section-subtitle">Section subtitle</Typography>
+        <Typography variant="item-title">Item title</Typography>
+        <Typography variant="item-subtitle">Item subtitle</Typography>
+        <Typography variant="tile-title">Tile title</Typography>
+        <Typography variant="tile-subtitle">Tile subtitle</Typography>
+        <Typography variant="paragraph">Paragraph</Typography>
+        <LabelledValue label="Phone">+48 604 343 212</LabelledValue>
       </SectionCard>
     </main>
-    <style>
-      :root {
-        --text-title: #111827;
-        --text-primary: #374151;
-        --text-secondary: #6b7280;
-        --white: #fff;
-      }
-
-      html {
-        font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-          'Segoe UI Symbol';
-      }
-
-      body {
-        margin: 0;
-      }
-    </style>
   </body>
 </html>

tailwind.config.cjs

@@ -0,0 +1,16 @@
+const colors = require('tailwindcss/colors');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: colors.white,
+      primary: colors.indigo,
+      gray: colors.gray,
+    },
+  },
+  plugins: [],
+};

tsconfig.json

@@ -28,8 +28,6 @@
     // Force the usage of the indexed syntax to access fields declared using an index signature.
     "noUncheckedIndexedAccess": true,
     // Report an error when the value `undefined` is given to an optional property that doesn't specify `undefined` as a valid value.
-    "exactOptionalPropertyTypes": true,
-    // Enable intellisense for imports from CSS Modules.
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+    "exactOptionalPropertyTypes": true
   }
 }