added tailwind; added prefix for tailwind so it will work well with …

…bootstrap

package.json

@@ -72,6 +72,7 @@
     "@swc/jest": "0.2.17",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
+    "autoprefixer": "^10.4.14",
     "babel-eslint": "10.1.0",
     "babel-jest": "27.3.1",
     "babel-loader": "^8.2.3",
@@ -91,10 +92,12 @@
     "msw": "0.36.8",
     "node-mocks-http": "1.11.0",
     "npm-run-all": "4.1.5",
+    "postcss": "^8.4.21",
     "prettier": "2.4.1",
     "pretty-quick": "3.1.2",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "storybook-dark-mode": "1.0.9"
+    "storybook-dark-mode": "1.0.9",
+    "tailwindcss": "^3.2.7"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/assets/css/globals.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

src/assets/index.css

@@ -13,3 +13,4 @@
 @import 'css/pagination.css';
 @import 'css/toggle.css';
 @import 'css/video.css';
+@import 'css/globals.css';

src/components/Header/Header.js

@@ -16,8 +16,8 @@ function Header() {
         <div className="valign-center">
           <div className="container">
             <div className="col-md-10 col-md-offset-1">
-              <div className="intro text-left" style={{ color: '#fff' }}>
-                <h1 className="subtitle">Vets Who Code</h1>
+              <div className="intro">
+                <h1 className="subtitle tw-text-left tw-text-6xl tw-font-bold">Vets Who Code</h1>
                 <h2>
                   <Typed
                     style={{ fontFamily: 'Gotham, sans-serif' }}

src/components/Layout.js

@@ -3,6 +3,7 @@ import { ToastContainer } from 'react-toastify'
 import ThemeProvider from '../store/ThemeProvider'
 import Nav from './Nav'
 import Footer from './Footer'
+import './globals.css'
 
 const TemplateWrapper = ({ children }) => (
   <div>

src/pages/_app.js

@@ -12,6 +12,7 @@ import 'react-toastify/dist/ReactToastify.css'
 import '../assets/lib/bootstrap/dist/css/bootstrap.css'
 import '../assets/lib/bootstrap/dist/css/bootstrap-theme.css'
 
+import '../assets/css/globals.css'
 import '../assets/css/main.css'
 import '../assets/css/custom.css'
 import '../assets/css/nav.css'

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: 'tw-', // Note the prefix change.
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}', // Note the addition of the `app` directory.
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+
+    // Or if using `src` directory:
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}