chore: add Tailwind

wweitzel · Sep 2, 2023 · 43dee4b · 43dee4b
1 parent d0ea1b3
commit 43dee4b
Show file tree

Hide file tree

Showing 11 changed files with 1,668 additions and 60 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,8 +48,12 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "@vitejs/plugin-react": "^4.0.4",
+    "autoprefixer": "^10.4.15",
     "jsdom": "^22.1.0",
+    "postcss": "^8.4.29",
     "prettier": "2.6.2",
+    "tailwindcss": "^3.3.3",
+    "ts-node": "^10.9.1",
     "vite": "^4.4.9",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",

diff --git a/postcss.config.ts b/postcss.config.ts
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -3,11 +3,6 @@ import {useEffect, useState} from 'react';
 import _logoWhite from '../assets/top90logo-white.png';
 import _logoBlack from '../assets/top90logo-black.png';
 
-const logoStyle = {
-  height: 250,
-  cursor: 'pointer',
-};
-
 interface HeaderProps {
   selectedTheme: string;
   onClick?: () => void;
@@ -29,7 +24,7 @@ export function Header({selectedTheme, onClick}: HeaderProps) {
 
   return (
     <div className="d-flex justify-content-center">
-      <img style={logoStyle} src={logo} onClick={onClick} alt="logo" />
+      <img className="cursor-pointer h-[250px]" src={logo} onClick={onClick} alt="logo" />
     </div>
   );
 }
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -7,12 +7,11 @@ interface InputProps {
 
 function Input({label, placeholder, value, onInput}: InputProps) {
   return (
-    <div style={{width: '100%'}}>
+    <div className="w-[100%]">
       <label className="form-label">{label}</label>
-      <div style={{borderRadius: '20px'}} className="shadow-sm">
+      <div className="shadow-sm rounded-full">
         <input
-          style={{borderRadius: '20px'}}
-          className="form-control"
+          className="form-control rounded-full"
           placeholder={placeholder}
           value={value}
           onInput={(e: React.ChangeEvent<HTMLInputElement>) => onInput(e.target.value)}

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -12,14 +12,13 @@ interface SelectProps {
 
 function Select({label, options, value, onChange}: SelectProps) {
   return (
-    <div className="form-group" style={{width: '100%'}}>
+    <div className="form-group w-[100%]">
       <label className="form-label" htmlFor="select">
         {label}
       </label>
-      <div style={{borderRadius: '20px'}} className="shadow-sm">
+      <div className="shadow-sm rounded-full">
         <select
-          style={{borderRadius: '20px'}}
-          className="form-select"
+          className="form-select rounded-full"
           name="select"
           id="select"
           value={value}

diff --git a/src/components/ThemeSelect.tsx b/src/components/ThemeSelect.tsx
@@ -17,8 +17,7 @@ function ThemeSelect({onChange}: ThemeSelectProps) {
         onChange={onChange}
         name="select"
         id="select"
-        style={{borderRadius: '20px'}}
-        className="form-select mb-4"
+        className="form-select mb-4 rounded-full"
       >
         <option value="dark">Dark</option>
         <option value="light">Light</option>

diff --git a/src/components/Video.tsx b/src/components/Video.tsx
@@ -3,14 +3,6 @@ import {API_BASE_URL} from '../api/core';
 
 import {useEffect, useState} from 'react';
 
-const buttonStyle = {
-  border: 'none',
-};
-
-const daysAgoTextStyle = {
-  fontSize: '14px',
-};
-
 const defaultButtonText = 'Copy Link';
 const clickedButtonText = 'Link Copied';
 
@@ -83,22 +75,20 @@ export function Video({goal}: {goal: Goal}) {
       <div className="d-flex justify-content-between align-items-center">
         <div>
           <button
-            style={buttonStyle}
             onClick={() => copyShareUrl()}
             disabled={disableButton}
-            className="btn btn-outline-secondary btn-sm"
+            className="btn btn-outline-secondary btn-sm border-none"
           >
             {buttonText}
           </button>
           <button
-            style={buttonStyle}
             onClick={() => goToRedditPost(postId(goal.RedditFullname))}
-            className="btn btn-outline-secondary btn-sm"
+            className="btn btn-outline-secondary btn-sm border-none"
           >
             Comments
           </button>
         </div>
-        <div style={daysAgoTextStyle} className="fw-light me-2">
+        <div className="fw-light me-2 text-sm">
           {daysAgoText(numDaysAgo(new Date(goal.CreatedAt)))}
         </div>
       </div>

diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,7 @@
 @import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 body {
   -webkit-font-smoothing: antialiased;

diff --git a/src/pages/Goals.tsx b/src/pages/Goals.tsx
@@ -11,15 +11,6 @@ import ThemeSelect from '../components/ThemeSelect';
 import {Header} from '../components/Header';
 import {getPreferredTheme, setTheme} from '../lib/utils';
 
-const maxWidthContainer = {
-  maxWidth: '800px',
-  width: '100%',
-};
-
-const form = {
-  width: '100%',
-};
-
 const defaultPagination: Pagination = {skip: 0, limit: 5};
 
 function Goals() {
@@ -161,10 +152,10 @@ function Goals() {
 
   return (
     <div className="container d-flex justify-content-center">
-      <div style={maxWidthContainer}>
+      <div className="w-[100%] max-w-[800px]">
         <Header selectedTheme={selectedTheme} onClick={reset}></Header>
 
-        <form style={form} onSubmit={handleSubmit}>
+        <form className="w-[100%]" onSubmit={handleSubmit}>
           <div className="d-flex">
             <Select
               label={'League'}
@@ -204,7 +195,7 @@ function Goals() {
           <br></br>
 
           <div className="d-flex">
-            <div className="flex-grow-1" style={{flexBasis: '0'}}>
+            <div className="flex-grow-1 basis-0">
               <Input
                 label={'Keyword Search'}
                 placeholder={'Search anything'}
@@ -213,16 +204,11 @@ function Goals() {
               ></Input>
             </div>
 
-            <div className="flex-grow-1" style={{flexBasis: '0'}}>
+            <div className="flex-grow-1 basis-0">
               <ThemeSelect onChange={changeTheme}></ThemeSelect>
             </div>
 
-            <button
-              style={{display: 'none'}}
-              className="btn btn-primary"
-              id="searchButton"
-              type="submit"
-            />
+            <button className="btn btn-primary hidden" id="searchButton" type="submit" />
           </div>
 
           <br></br>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};