英文:
Tag size is not correctly rendering
问题
我已经创建了一个可重复使用的标题标签，用于在我的Next.js应用程序中实现。在调试时，它显示了正确的标签名称，但在任何标签级别上都没有显示任何差异。
import React from 'react';
import PropTypes from 'prop-types';
const Heading = ({ level, children, className }) => {
const HeadingTag = `h${level}`;
return (
<HeadingTag
className={`text-xl md:text-2xl lg:text-3xl font-bold ${className}`}
>
{children}
</HeadingTag>
);
};
Heading.propTypes = {
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
children: PropTypes.node.isRequired,
className: PropTypes.string
};
Heading.defaultProps = {
className: ''
};
export default Heading;
我使用它的方式如下：
<Heading level={6}>我是软件开发者</Heading>
英文:
I have created a reusable heading tag to implement in my Nextjs app. it shows the correct tag name in while dubbing but it does not show any difference on any level of tag.
import React from 'react';
import PropTypes from 'prop-types';
const Heading = ({ level, children, className }) => {
const HeadingTag = `h${level}`;
return (
<HeadingTag
className={`text-xl md:text-2xl lg:text-3xl font-bold ${className}`}
>
{children}
</HeadingTag>
);
};
Heading.propTypes = {
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
children: PropTypes.node.isRequired,
className: PropTypes.string
};
Heading.defaultProps = {
className: ''
};
export default Heading;
and I am using like this
<Heading level={6}> I'm Software Developer </Heading>
答案1
得分: 1
标题在Tailwind CSS中没有样式，所以你不会看到任何视觉差异。
你可以为每个级别动态添加不同的类，或者如果你想让它们看起来不同，可以添加基本样式。
英文:
Headings are unstyled in Tailwind CSS, so you won't see any visual differences.
You can either dynamically add different classes for each level, or add bases styles if you want them to look different.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论