Remix에 순풍 타이포그래피 플러그인 추가
3672 단어 tailwindcssreact
이는 Tailwind가 이것을 무엇으로 렌더링해야 할지 실제로 알지 못하기 때문입니다.
따라서 Tailwind Typography plugin을 사용하여 이 문제를 해결할 수 있습니다.
Remix에 Tailwind Typography 플러그인 설치
이 플러그인의 설치는 NPM과 함께 종속성을 설치하기만 하면 되기 때문에 매우 간단합니다.
npm install -D @tailwindcss/typography
이 작업이 완료되면 tailwind 구성 파일에 등록해야 합니다. 이 파일은
tailwind.config.js 프로젝트의 루트에 있습니다.이 파일 안에 플러그인을 추가합니다.
module.exports = {
content: ['./app/**/*.{ts,tsx,jsx,js}'],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/typography')],
};
이 플러그인을 사용하려는 모든 요소에 prose 클래스를 추가할 수 있습니다.
우리의 경우 마크다운 파일에 사용할 수 있도록 루트 파일에 추가하겠습니다.
export default function App() {
return (
<html lang='en' className='h-full'>
...
<body className='h-full p-4 prose'>
<Outlet />
...
</body>
</html>
);
}
본문의
prose 클래스에 유의하십시오. 이것이 활성화될 것입니다.이제 웹 사이트를 실행하고 마크다운 렌더링된 게시물을 보면 실제로 작동하는 것을 볼 수 있습니다.
GitHub에서 완성된 코드를 찾을 수도 있습니다.
읽어주셔서 감사합니다. 연결해 봅시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(Remix에 순풍 타이포그래피 플러그인 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/adding-tailwind-typography-plugin-in-remix-4g4g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
