Tailwind CSS 11px Update

TODO: collapasable, copyable, download, etc

I'm using tailwind. My designer wants to update text-xs to be 11px isntead of 12. How do I update that in tailwind config?To update the text-xs class to use a font size of 11px instead of the default 12px in Tailwind CSS, you'll need to modify the tailwind.config.js file. Here’s how you can do it:

  1. Open your tailwind.config.js file.
  2. Extend the theme to include your custom font sizes. If you haven't extended the theme for font sizes before, you can add it under the extend section of the theme configuration.

Here is an example configuration that changes the text-xs font size to 11px:

module.exports = {
  theme: {
    extend: {
      fontSize: {
        xs: '11px',
      },
    },
  },
}

This code tells Tailwind to use 11px for the text-xs utility class, overriding the default value.

  1. Save the changes and make sure your build process compiles the Tailwind CSS with these new settings.

By doing this, any use of the text-xs class in your HTML or template files will now correspond to a font size of 11px. Make sure to test your application to ensure that the new size integrates well with your design.

Tailwind CSS 11px Update created at Tue Jan 20 1970 20:16:21 GMT+0000 (Coordinated Universal Time)

Related Chats

Tailwind CSS 11px Update 0.999

Merge and Deduplicate Tailwind Classes 0.334

Wrap Long Text CSS 0.330

React TypeScript - Handle Unknown 0.312

Estimate Character Width Roboto 0.305

Custom LaTeX Template. 0.295

Control Window Size: VisionOS 0.291

Adjusting Vertical Position CSS 0.290

Type Chats: ChatSession Creation 0.283

Conditional UserProvider Wrapper 0.227