I am trying to add a google font to NextJS via CDN. For some reason it works, but only when I add the font without selecting any font weights. Does anyone know how I can include the full font family?
Works:
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap"rel="stylesheet"/>
Does not work:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
Full _document.tsx
import Document, {
DocumentContext,
DocumentInitialProps,
Html,
Head,
Main,
NextScript,
} from "next/document";
class MyDocument extends Document {
static async getInitialProps(
ctx: DocumentContext
): Promise<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx);
return initialProps;
}
render() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
{/* <link
href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
rel="stylesheet"
/> */}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
tailwind.config.js
/** #type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
const headerHeight = "80px";
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./layouts/**/*.{js,ts,jsx,tsx}",
"node_modules/daisyui/dist/**/*.js",
],
theme: {
extend: {
fontFamily: {
sans: ["Inter", ...defaultTheme.fontFamily.sans],
},
height: {
header: headerHeight,
},
padding: {
header: headerHeight,
},
},
},
plugins: [require("daisyui"), require("#tailwindcss/typography")],
};
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap");
#tailwind base;
#tailwind components;
#tailwind utilities;
html,
body,
#__next {
padding: 0;
margin: 0;
height: 100%;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
Method 1
For the google font to work,
Go to Google Fonts and select the font you want in your app, like here I am using Dancing Script with all weights.
Now copy the import URL given in Use on the web section.
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#400;500;600;700&display=swap');
Paste the import in globals.css file like this.
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#400;500;600;700&display=swap');
#tailwind base;
#tailwind components;
#tailwind utilities;
IN tailwind.config.js file , Inside themes => extend add a new property of fontFamily and give the font a name like Dancing here.
theme: {
extend: {
fontFamily: {
Dancing: ['Dancing Script', 'cursive'],
},
},
},
Note: The rules in the array should be the same as given in Google fonts.
Now you can give any tag the className of font-fontName in this case font-Dancing.
<h1 className="font-Dancing">This is using a custom font</h1>
Method 2
Try to use the font-bold class in the code as an alternative.
Related
I am using tailwindcss version 3.2.6.
I tried this in different ways but it didn't work.
After trying it in VScode I'm getting an error like this-
The `dark:` class does not exist. If `dark:` is a custom class, make sure it is defined within a `#layer` directive.
When I try to add this in global.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
body {
#apply max-w-2xl mx-auto px-4 bg-white text-black;
#apply dark: bg-black dark:text-white
}
}
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}"
],
darkMode: "class",
theme: {
extend: {
fontFamily: {
"sans": ['var(--font-rubik)']
}
}
},
plugins: [require("daisyui")],
}
app.tsx
import "#/styles/globals.css"
import type { AppProps } from "next/app";
import { ThemeProvider } from "next-themes";
import { rubik } from "#/Fonts";
export default function App({ Component, pageProps }: AppProps) {
return (
<ThemeProvider attribute="class">
<main className={`${rubik.variable} font-sans`}>
<Component {...pageProps} />
</main>
</ThemeProvider>
)
}
Why I am facing that error?
dark: bg-black is invalid. It should be dark:bg-black without the space.
Hi i am new to tailwind css, i am trying to do a portfolio website with next js tailwind css but my classes are not working and i do not know why.
tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
This are my globals.css:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
#font-face {
font-family: "burtons";
src: url("../public/Burtons.otf");
}
And this is my index.tsx:
import Head from 'next/head'
import { Inter } from '#next/font/google'
import { BsFillMoonStarsFill } from 'react-icons/bs';
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<>
<Head>
<title>Mateo Ghidini Dev</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className='bg-white px-10'>
<section className='min-h-screen'>
<nav className='py-10 mb-12 flex justify-between'>
<h1 className='text-xl'>Developed by Mateo Ghidini</h1>
<ul className='flex items-center'>
<li>
<BsFillMoonStarsFill/>
</li>
<li>Resume</li>
</ul>
</nav>
</section>
</main>
</>
)
}
Only my html tags are working. Any reason why?
If the classes are working in your HTML tags then the problem must be the content array in your tailwind.config.js. You are adding tailwind classes in a file whose path is not included in the content array so Tailwind is likely purging those classes and not applying them.
Modify it like this and try:
module.exports = {
content: ["./src/**/*.{html,js,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
Also make sure that your index file or any other file where you are applying the classes are inside src folder and if you want to target other folders like pages in case of next.js then mention their paths too in the content array.
I guess your tailwind classes don't get shipped. Please have a look at the Tailwind docs for that, you can either use the tailwind CLI in a manual approach or use PostCSS if you're not using a framework like next.js:
https://tailwindcss.com/docs/installation
Suddenly my Tailwind started to load very slow when refreshing (hot-reload).
After some research, I found that #tailwind utilities; should not be imported via globals.css so I created a new file called tailwind-utils.css. ( #tailwind base and #tailwind components are also imported from different file called tailwind.css.)
Then, I imported those files in the _app.tsx like below
import '../styles/tailwind.css'
import '../styles/tailwind-utils.css'
import type { AppProps } from 'next/app'
import { GlobalStyles } from 'twin.macro'
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<GlobalStyles />
<Component {...pageProps} />,
</>
)
}
export default MyApp
And here is my tailwind.config.js file.
module.exports = {
mode: 'jit',
important: true,
content: ['./src/**/*.{js,ts,jsx,tsx}'],
purge: ['./src/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
plugins: [require('daisyui')]
}
Currently, the hot-reload takes more than 40seconds to load so I want to figure a way to go faster loading.
Here is my globals.css
/* #tailwind base;
#tailwind components;
#tailwind utilities; */
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
#import url('https://fonts.googleapis.com/css2?family=IBM Plex Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
I also noticed that hot-reloads complete in a second when I write CSS from the module, not inline. But when I update CSS using Twin.Macro syntax (Inline CSS) it takes lots time...
I'm using next-mdx-remote to make use of MDX in my Next.js project.
I've been following JetBrains WebStorm guide to build this, here they've used bootstrap as their CSS but my choice of CSS framework was tailwind css.
The thing is when I install tailwind css or any other CSS based on tailwind css like flowbite, the MDX page loses it's styling.
Expected
What I Get after adding tailwind
tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";
import Script from "next/script";
import Nav from "../components/Nav";
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
{/* <link
rel="stylesheet"
href="https://unpkg.com/#themesberg/flowbite#1.2.0/dist/flowbite.min.css"
/> */}
</Head>
<Script src="https://unpkg.com/#themesberg/flowbite#1.2.0/dist/flowbite.bundle.js" />
<Nav />
<Component {...pageProps} />
</>
);
}
export default MyApp;
globals.css
#tailwind base;
#tailwind components;
#tailwind utilities;
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
[blogId].tsx
// import fs from "fs";
import matter from "gray-matter";
import path from "path";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import { connectToDatabase } from "../../utils/mongodb";
import { ObjectId } from "mongodb";
const BlogPg = ({ frontMatter: { title }, MDXdata }) => {
return (
<div className="px-5 md:px-80 py-10">
<p className="text-5xl mb-4">{title}</p>
<MDXRemote {...MDXdata} />
</div>
);
};
export const getStaticPaths = async () => {
let { db } = await connectToDatabase();
const posts = await db.collection("blogs").find({}).toArray();
const paths = posts.map((post) => ({
params: {
blogId: post._id.toString(),
},
}));
return {
paths,
fallback: false,
};
};
export const getStaticProps = async ({ params: { blogId } }) => {
// const fileContent = fs.readFileSync(
// path.join("posts", blogId) + ".mdx",
// "utf-8"
// );
let { db } = await connectToDatabase();
const post = await db
.collection("blogs")
.find({ _id: new ObjectId(blogId) })
.toArray();
const { data: frontMatter, content } = matter(post[0].text);
const MDXdata = await serialize(content);
return {
props: {
frontMatter,
blogId,
MDXdata,
},
};
};
export default BlogPg;
You may change content to purge and add require('#tailwindcss/typography') to plugins in tailwind.config.js.
And then to see typography changes you should cover your <MDXRemote .../> with a prose named div.
tailwind.config.js
module.exports = {
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [require('#tailwindcss/typography')],
};
[blogId].tsx
...
<div className="prose">
<MDXRemote {...MDXdata} />
</div>
</div>
);
};
...
I am having a particular issue only on one project, which is using nextjs and tailwindcss.
I try to extend the color scheme with some custom colors and intellisennse recognizes the colors, but they are not applied and when I use it with #apply, app just breaks, saying those classes do not exist.
Syntax error: #apply cannot be used with .text-test because .text-test either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-test exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree.
This works in production so colors are applied, error just happens in dev. I can work around it,
but still it boggles me why it is not working.
_app.js
import ClientProvider from '../context/urqlClient'
import makeClient from '../utils/makeUrqlClient'
import '../styles/index.css'
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClientProvider makeClient={makeClient}>
<Component {...pageProps} />
</ClientProvider>
)
}
export default MyApp
tailwind.config.js
module.exports = {
theme: {
colors: {
transparent: colors.transparent,
current: colors.current,
black: colors.black,
white: colors.white,
gray: colors.gray,
orange: colors.orange,
red: colors.red,
},
extend: {
colors: {
barbarian: '#FF7D01',
bard: '#E6CC80',
cleric: '#FFFFFF',
druid: '#FF7D0A',
fighter: '#C79C6E',
monk: '#00FF96',
paladin: '#F58CBA',
ranger: '#ABD473',
rogue: '#FFF569',
sorcerer: '#FF4700',
warlock: '#9482C9',
wizard: '#69CCF0',
},
},
},
variants: {},
plugins: [],
corePlugins: {
float: false,
},
purge: ['./**/*.tsx', './**/*.css'],
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
}
index.css (tailwind stuff only, rest I won't bother you with)
#tailwind base;
#tailwind components;
/* purgecss end ignore */
#tailwind screens;
#tailwind utilities;
html {
font-family: 'Inter var', sans-serif;
width: 100vw;
overflow-x: hidden;
}
...
I think you will need to move your CSS before the #tailwind lines. I think some of your styles must be missing from this component, since I don't see .text-test being referenced anywhere.
Anyways, try this:
html {
font-family: 'Inter var', sans-serif;
width: 100vw;
overflow-x: hidden;
}
...
#tailwind base;
#tailwind components;
/* purgecss end ignore */
#tailwind screens;
#tailwind utilities;