bridgetownrb / tailwindcss-automation

Automation for installing TailwindCSS in Bridgetown sites
MIT License
11 stars 2 forks source link

How do I use `@tailwindcss/typography`? #2

Open firedev opened 1 year ago

firedev commented 1 year ago

Hi. Tried to add it to package.json and postcss.config.js but class="prose" did nothing.

diff --git a/package.json b/package.json
index cd100f4..1ef612a 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.10",
   }
 }

and

diff --git a/postcss.config.js b/postcss.config.js
index bd5099c..617c814 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,10 +1,15 @@
 module.exports = {
   plugins: {
-    'tailwindcss': {},
+    "tailwindcss": {
+      plugins: [
+        require("@tailwindcss/typography"),
+        // ...
+      ],
+    },
   "postcss-flexbugs-fixes": {},
   "postcss-preset-env": {
       autoprefixer: {
       flexbox: 'no-2009'
       flexbox: "no-2009"
       },
       stage: 2
     }
malachaifrazier commented 1 year ago

Did you ever figure this out?

firedev commented 1 year ago

@malachaifrazier just made it myself:

h1, .h1 {
    @apply text-4xl font-bold mb-4 mt-8;

  }
  h2, .h2 {
    @apply text-3xl font-bold mb-3 mt-6;
  }
  h3, .h3 {
    @apply text-2xl font-bold mb-2 mt-4;
  }

  code {
    @apply px-4 py-2 font-bold;
  }

  p {
    @apply mb-4;
  }

  ul, ol {
    @apply mb-4;
  }

  ol {
    @apply list-decimal mb-4 ml-8;
  }
christopher-b commented 2 weeks ago

It's working for me. I added the plugin require in my tailwind.config.js:

  module.exports = {
    content: [
      './src/**/*.{html,md,liquid,erb,serb,rb}',
      './frontend/javascript/**/*.js',
    ],
    theme: { ... },
    plugins: [
      require('@tailwindcss/typography'),
    ],
  }