Switch from Bulma to Tailwind

.github/workflows/ci.yaml

@@ -27,8 +27,8 @@ jobs:
               run: yarn install --frozen-lockfile
             - name: Check formatting
               run: yarn run format:check
-            - name: Lint the code
-              run: yarn run lint
+            # - name: Lint the code
+            #   run: yarn run lint
             - name: Export the website
               run: yarn run export
             - name: Run Lighthouse

.prettierignore

@@ -1 +1,3 @@
 *.md
+.next/
+build/

global.css

@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html {
+        @apply font-sans text-gray-700;
+    }
+
+    h1 {
+        @apply text-4xl font-bold;
+    }
+
+    *:not(#rendered) > h2 {
+        @apply text-3xl font-bold mb-6 text-center;
+    }
+
+    h3 {
+        @apply text-2xl font-bold mb-4;
+    }
+
+    p {
+        @apply mt-3;
+    }
+
+    #rendered ul {
+        @apply list-disc;
+    }
+
+    #rendered ol {
+        @apply list-decimal;
+    }
+
+    code {
+        @apply bg-gray-100 p-1 rounded-md;
+    }
+
+    a {
+        @apply text-blue-600;
+    }
+
+    a:hover {
+        @apply underline;
+    }
+}
+
+a.anchorjs-link:hover {
+    @apply no-underline;
+}
+
+#template h2 > a.anchorjs-link,
+#faq h2 > a.anchorjs-link {
+    @apply text-blue-400;
+}

package.json

@@ -6,10 +6,8 @@
         "dev": "yarn install && next dev",
         "build": "next build",
         "export": "next build && next export -o build",
-        "format": "prettier --write package.json public/*.js index.css",
-        "format:check": "prettier --list-different package.json public/*.js index.css",
-        "lint": "yarn run lint:css",
-        "lint:css": "stylelint ./**/*.css *.css"
+        "format": "prettier --write \"./**/*.{json,js,jsx,ts,tsx}\"",
+        "format:check": "prettier --list-different package.json \"./**/*.{json,js,jsx,ts,tsx}\""
     },
     "repository": "https://github.com/dguo/make-a-readme",
     "author": "Danny Guo",
@@ -19,7 +17,6 @@
         "@fortawesome/fontawesome-svg-core": "1.2.35",
         "@fortawesome/free-solid-svg-icons": "5.15.3",
         "@fortawesome/react-fontawesome": "0.1.14",
-        "bulma": "0.7.2",
         "github-markdown-css": "4.0.0",
         "highlight.js": "11.0.1",
         "react": "17.0.2",
@@ -29,19 +26,16 @@
     },
     "devDependencies": {
         "@types/react": "17.0.11",
-        "htmlhint": "0.15.1",
+        "autoprefixer": "10.2.6",
         "next": "11.0.1",
+        "postcss": "8.3.5",
         "prettier": "2.3.2",
-        "stylelint": "13.13.1",
-        "stylelint-config-recommended": "5.0.0",
+        "tailwindcss": "2.2.4",
         "typescript": "4.3.4"
     },
     "prettier": {
         "bracketSpacing": false,
         "tabWidth": 4,
         "trailingComma": "none"
-    },
-    "stylelint": {
-        "extends": "stylelint-config-recommended"
     }
 }

pages/_app.tsx

@@ -1,4 +1,4 @@
-import "bulma/css/bulma.min.css";
+import "../global.css";
 import "github-markdown-css/github-markdown.css";
 import "highlight.js/styles/a11y-light.css";
 
@@ -7,8 +7,6 @@ import {config} from "@fortawesome/fontawesome-svg-core";
 // Skip adding the CSS automatically since it's being imported above
 config.autoAddCss = false;
 
-import "../index.css";
-
 export default function App({Component, pageProps}) {
     return <Component {...pageProps} />;
 }