I'm creating a React app using typescript and attempting to use one of Tailwind's multi-column application shells (this one), and then render some HTML using Tailwind Typography via its prose class.
(I've yet to get Tailwind Typography to work as expected within an existing project. So, I started from scratch to try and isolate the issue with a very basic app.)
My package.json
{
"name": "basic-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@headlessui/react": "^1.4.2",
"@heroicons/react": "^1.0.5",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.0",
"@types/node": "^16.11.19",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"typescript": "^4.5.4",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.0",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.13"
}
}
My tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
}
src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
My app.tsx
import React from "react";
import Example from "./routes/AppShell"
export default function App() {
return <Example />;
}
My ./routes/AppShell.tsx is copy pasted from this multi-column layout application shell.
Except I added this HTML contained by a prose class element:
{/* Primary column */}
<section aria-labelledby="primary-heading" className="min-w-0 flex-1 h-full flex flex-col lg:order-last">
<h1 id="primary-heading" className="sr-only">
Photos
</h1>
<article className="prose prose-lg">
<h1>Heading 1</h1>
<p>Lorem ipsum...</p>
<h2>Heading 2</h2>
<p>Lorem ipsum...</p>
<h3>Heading 3</h3>
<p>Lorem ipsum...</p>
<h4>Heading 4</h4>
<p>Lorem ipsum...</p>
</article>
</section>
Yet, the typography plugin does not seem to kick in?!
