0

我正在使用 typescript 创建一个 React 应用程序，并尝试使用 Tailwind 的多列应用程序 shell之一（这个），然后使用Tailwind Typography通过其prose类呈现一些 HTML。

（我还没有让 Tailwind Typography 在现有项目中按预期工作。所以，我从头开始尝试用一个非常基本的应用程序来隔离问题。）

我的 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"
  }
}

我的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;
}

我的应用程序.tsx

import React from "react";
import Example from "./routes/AppShell"

export default function App() {
  return <Example />;
}

我的 ./routes/AppShell.tsx 是从这个多列布局应用程序 shell复制粘贴的。

prose除了我添加了这个由类元素包含的 HTML ：

{/* 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>

然而，排版插件似乎没有启动？！

在此处输入图像描述

4

1 回答 1

0

愚蠢的错误：由于 w/e 的原因我tailwind.config.js没有被使用。Tailwind 排版现在工作了，因为这些变化开始了。

在此处输入图像描述

于 2022-01-13T20:57:12.307 回答