Font Style

    Use the utility to display text normally. This is typically used to reset italic text at different breakpoints.

    Use the .italic utility to make text italic.

    Font Style - 图2

    To control the font style of an element at a specific breakpoint, add a {screen}: prefix to any existing font style utility. For example, use to apply the italic utility at only medium screen sizes and above.

    For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

    all

    sm

    Font Style - 图5

    md

    Font Style - 图7

    xl

    The quick brown fox jumped over the lazy dog.

    By default, only responsive variants are generated for font style utilities.

    You can control which variants are generated for the font style utilities by modifying the fontStyle property in the section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    Disabling


    ← Font Smoothing