We are now using a locally installed font in the project.Changing the default font in Tailwind CSSWhile Tailwind offers many options by default, it also enables you to extend the default configuration by adding your own classes or changing the properties of the default configuration. To do this...
In the end, your CSS file will look like this:@tailwind base; @tailwind components; @tailwind utilities; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap'); @layer base { html { font-family: Inter, system-ui, sans-serif; }...
First step here is to download the actual font resources. If you’re familiar withTailwind UIyou’ll know they recommend using the Inter font family as a default font. So we’ll be doing that and also adding a decorative font (Lobster) that could possibly be used in place of a logo or...
Many utilities in Tailwind share a common namespace but map to different CSS properties. For exampletext-lgandtext-blackboth share thetext-namespace, but one is forfont-sizeand the other is forcolor. When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on...
Tailwind CSS - Height Tailwind CSS - Min-Height Tailwind CSS - Max-Height Tailwind CSS - Size Tailwind CSS - Typography Tailwind CSS - Font Family Tailwind CSS - Font Size Tailwind CSS - Font Smoothing Tailwind CSS - Font Style Tailwind CSS - Font Weight Tailwind CSS - Font Variant Numeric...
@layerbase{h1{font-size:30px;}} Thecomponentslayer is empty by default — it’s just a place to put your own classes. If you were doing things the Tailwind way, you’d probably use@apply(although the creator of Tailwind recentlyadvised against it), but you can also write classes the ...
import { type Config } from "tailwindcss" import typographyStyles from "./typography" export default { content: ["./src/**/*.{js,jsx,ts,tsx}"], darkMode: "selector", plugins: [typographyPlugin], theme: { fontSize: { xs: ["0.8125rem", { lineHeight: "1.5rem" }], sm: ["0.875...
The current settings are stored in the settings.json file. NOTE The Material and Tailwind themes use the online Roboto font. If your app is designed to work on a local network without an internet connection, you can use the customized folder, as it contains CSS files without online ...
I have new Laravel installation with Livewire. I've installed everything like I did in few previous projects with no problems. But I've noticed something odd when I try to add custom colors into Tailwind using extend. Whenever I change color be it text or background of an element that ch...
tailwind.config.ts 2 changes: 1 addition & 1 deletion2app/globals.css Original file line numberDiff line numberDiff line change Expand Up@@ -35,7 +35,7 @@ body { } .str-chat__channel-list{ width:50%; width:100%; } .str-chat__channel{ ...