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...
@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; } } Now your default font is that one, and you ...
In the output CSS file that gets built, Tailwind’s CSS reset — known asPreflight— is included first as part of the base styles. The rest ofbaseconsists of CSS variables needed for Tailwind to work.componentsis a place for you to add your own custom classes. Any utility classes you’...
If it makes sense to be customizable, Tailwind lets you customize it. This includes colors, border sizes, font weights, spacing utilities, breakpoints, shadows, and tons more. Tailwind is written inPostCSSand configured in JavaScript, which means you have the full power of a real programming la...
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 moving an app to Laravel 10, with Laravel-Mix i have added some custom css classes inside the resource/app.css @tailwind base; @tailwind components; @tailwind utilities; @layer components { .line-danger { @apply border text-center h-4
Tailwind providesdefault themewith a very generous set of values to get started, but don't be afraid to change it or extend; you're encouraged to customize it as much as you need to to fit the goals of your design Thethemesection is where we define our color palette, font stacks, type...
{"private":true,"scripts": {"dev":"vite","build":"vite build"},"devDependencies": {"@defstudio/vite-livewire-plugin":"^0.2.4","@tailwindcss/forms":"^0.5.2","alpinejs":"^3.4.2","autoprefixer":"^10.4.2","axios":"^0.27","laravel-vite-plugin":"^0.5.0","lodash":"^4.17.19...
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{ ...