Setting the font size base for my npm package: A guide

In my current setup, I have two main projects with different base font sizes - one at 14px and the other at 10px. Both of these projects utilize Tailwind CSS. The issue arises when using classes like text-base and text-sm for font sizes within each project, as they are dependent on rem units which in turn rely on the root font size.

Additionally, I have developed an npm package using Rollup, Tailwind, and React, which is being used in both of my main projects. In this npm package, I specifically want the base font size to be set at 16px only for its UI components. However, when viewing the final output, the code inside the npm package ends up inheriting the base font size from the main project it's being used in.

So my query is whether there exists a solution to setting separate base font sizes for the npm package and the main project individually?

htmlcssreactjstailwind-cssfont-size

Answer №1

If you want to adjust the size of the font, simply change the default size from 16px to 14px by editing the text-base in your project's tailwind.config.js file.

Modify tailwind.config.js

module.exports = {
  theme: {
    fontSize: {

      'base': '14px',
 
    }
  }
}

For more information and guidance, check out additional resources here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing the Chrome Dev Tools to malfunction when using these CSS pseudo selectors?

Upon closer inspection, I realized that the issue with Chrome Dev Tools not live editing CSS was caused by the following lines of code: @media (max-width: 767px) { .projects-* .v-center.row { display: block; width: auto; } .projects-* .v-cent ...

cssgoogle-chrome-devtools

What steps can be taken to create a curved bottom for the header section?

While I've seen this question asked before, I'm not satisfied with how the design has been implemented. Here is my desired look for the curved header I've experimented with border radius left and right, but the edges are excessively rounde ...

htmlcss

What is the challenge I am facing with my CSS code?

When viewing My JSFiddler at http://jsfiddle.net/7mfj7/2/, you may notice that the "Change Picture" text appears directly on the image for the first time. However, if you hover over the image and then move away, it works fine. Is there a way to hide the " ...

jquerycss

Tips for organizing a Bootstrap 4 menu overflowing with elements

I'm struggling to figure out how to organize a Bootstrap 4 menu with numerous links. Currently, when I include too many links, the navbar disregards the container and expands its width beyond the container. Here is an image for better clarification: ...

cssnavbarbootstrap-4

It is not possible to call a potentially 'undefined' object in TypeScript

Hello, I am new to TypeScript React and currently attempting to develop applications using TypeScript with tutorials from YouTube. const RegisterCustomer: React.FC = () => { const [text, setText] = useState<string>(''); const [e ...

reactjstypescriptfirebase

stop cascading style sheets from being overwritten

In my ASP.NET web forms project, I am utilizing Telerik controls. The Problem In one instance, I need to retrieve HTML data from the database, which includes a lot of CSS, images, and HTML content. Here is an excerpt of my code: <telerik:RadLabel ...

htmlcssasp.nettelerik

Tips on using the filter to display values corresponding to the selected date from the datepicker in React Js

Hello fellow developers, I've encountered an issue with filtering data based on dates using a date picker in React JS. Currently, the filtering works fine if the input date is less than the date I'm searching for. To illustrate this better, I&apo ...

javascriptreactjs

Learn how to acquire a JWT token with Next Auth V5

I am struggling to understand how Next Auth creates a JWT token, and I'm unsure of how to retrieve it. Here is the configuration within the auth.ts file: import NextAuth from "next-auth"; import Google from "next-auth/providers/google& ...

reactjsnode.jsexpressnext.jsnext-auth

Position the div alignment to the top within the table cell

I'm having trouble aligning the div under the header to the right. Here is my HTML code and a photo for reference: HTML Code: <td> <div class="schedule-content"> <div class="timestamp& ...

htmlcss

How to Create a Floating DIV with CSS

Here is the URL I am referring to: Website I want to position the Weather DIV above other content on the page while still maintaining its position when expanded or collapsed. How can I achieve this without affecting the layout of other elements? This is ...

htmlcss

Make the text return to its original state once the checkbox has been marked

I'm a beginner in CSS and JavaScript, and I've been attempting to change the text appearance from bold to normal when a checkbox is clicked, but so far, I haven't been successful... Initially, the text includes some bold words, but after cli ...

javascripthtmlcss

Sending array values from a dynamic input field in Angular 4 and processing them accordingly

I am currently exploring options on how to add and delete multiple input fields. When a user submits two or more fields, I want the results to be displayed in an array. This is my HTML form: <form method="post" [formGroup]="formData"> ...

jqueryhtmlangular

How can SASS be used to style a span based on its content?

In order to add css styling to a span element, I am looking to utilize only the dynamic SASS style processor without relying on any javascript/jQuery. The condition for applying the style should be based on the content of the span. For example: <sp ...

htmlcsssassstyles

Ensure that the element remains on a single line, even if it needs to be positioned below

I am dealing with a row of horizontal divs that I want to keep together, but a floating element on the right side is causing them to break into two lines when it overlaps. My goal is to have the line of divs move below the float, similar to how the word "H ...

csscss-float

Components can be iterated over without the use of arrays

In my component, I have a render that generates multiple components and I need some of them to be repeated. The issue I am facing is that when I create an HTML render, the variable is not being processed and it just displays as text. Although the actual c ...

javascriptreactjsloopsjsx

In Angular, you can add a unique design to an HTMLElement by applying a

I'm currently facing an issue with Typescript where I am attempting to apply a style on a HTMLElement. Below is the code snippet: styleChoice(element:HTMLElement){ console.log(element); element.style.background="rgba(228, 48, 48, 0.2)&qu ...

cssangulartypescriptstyleshtmlelements

The public folder in Node.js is known for its tendency to encounter errors

I'm facing an issue with displaying an icon on my website. Here is the current setup in my code: app.js const http = require('http'); const fs = require('fs'); const express = require('express') const path = require(&apo ...

javascripthtmlnode.jsexpress

Is there a way to use Selenium with Python to access and open the anchor tag links that are embedded within ul and li tags?

I am trying to figure out how to open the link associated with the anchor tag that has an ID of ViewInvoice. Can someone help me with this? I have attached a snapshot of the HTML page for reference. Snapshot: Highlighted in yellow is the specific item I a ...

pythonhtmlseleniumwebdriver

What are the steps to create a connect4 board featuring rounded corners and curved sides?

How can I create a Connect4 board with the exact styles and properties shown in the image? I want to achieve the curved sides effect as displayed. Can this be done using only HTML elements, or is there an easy SVG solution available? Here is my current co ...

javascripthtmlcss

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: https://i.sstatic.net/3ruNL.png This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type ...

javascripthtmlajax