I have a project in Next.js but can't figure out how to use Google Font with Tailwind CSS.
First You have to Add imported font Url in globals.css in the styles folder and For React.js It will be index.css in the src folder.
e.g.
#import url("https://fonts.googleapis.com/css2?family=Play:wght#400;700&display=swap");
#tailwind base;
#tailwind components;
#tailwind utilities;
Then Extend modules.exports in the tailwind.config.js file
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
play: ["Play", "sans-serif"],
},
},
},
plugins: [],
};
Finally, you can use this font anywhere e.g.
<h2 className="font-play text-5xl font-bold uppercase">
Hello World!
</h2>
In React Js
Step 1: Import Google font in index.css
#import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
Step 2: Configure Google Font in Tailwind CSS
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
extend: {
fontFamily: {
pacifico: ['"Pacifico"', ...defaultTheme.fontFamily.sans],
}
}
},
}
Step 3: Use your custom google font
<h1 class="pacifico">Pacifico is Google Font</h1>
Related
I got a problem using tailwind css with Vue3. Looking at the network tab it's size is 4.4 MB.
The postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
cssnano: {}
}
}
tailwind.config.js
module.exports = {
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
prefix: 'tw-',
...
cssnano is added using yarn.
yarn.lock
cssnano-preset-default#^5.2.12:
cssnano#5.1.13
tailwindcss#^2.1.4:
Importing tailwind in main.css which itself is imported in the vue entrypoints.
#tailwind utilities;
#tailwind base;
#tailwind components;
Whether in development nor in production the size of main.css changes.
All right, I solved it. The version of tailwind I'm using ain't compatible with the "content" setting in the current documentation. I still have to use this syntax:
purge: {
enabled: true,
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
},
Also needed to do a re-build of the prod environment.
You have also the mode JIT it will generates your styles on-demande https://v2.tailwindcss.com/docs/just-in-time-mode
Need to use tailwind in a next.js project, but only in one page
How to import the Tailwind directives
#tailwind base; #tailwind components; #tailwind utilities;,
without affecting all other pages?
You can follow the same steps as mentioned here.
However in Step 3 , just give the path of your only file where you want Tailwindcss.
module.exports = {
content: [
"./pages/<path_of_your_file>",
],
theme: {
extend: {},
},
plugins: [],
}
i've followed this guide : https://tailwindcss.com/docs/guides/remix
step by step (twice,to be sure). yet nothing works.
my tailwind config js looks like that :
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
My root:
import styles from './styles/app.css';
export function links() {
return [{ rel: 'stylesheet', href: styles }];
}
I've created a new folder called styles inside app folder and inside the styles i've created app.css which has the following :
#tailwind base;
#tailwind components;
#tailwind utilities;
I'm trying to style my index.tsx
export default function Index() {
return (
<div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
<h1 className='text-3xl font-bold text-blue-500 underline'>Hello world!</h1>
</div>
);
}
i run : "npm run dev" yet i get no style over my h1 in the index.
any help appreciated.
You need to create 2 new "styles" folders, the first at the same level as the package.json, and create the app.css file in this place with the code:
./styles/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
The second styles folder are inside "app" directory (here the tailwind command will export the compiled CSS)
./app/styles/app.css this is the output of the tailwindcss command
Then you can import the ./app/styles/app.css file in the root.js(x) file
import styles from "./styles/app.css"
export function links() {
return [{ rel: "stylesheet", href: styles }]
}
i had the same problem and i want to add to #Michael's that it worked for me when i included the <Links /> component from remix inside the head.
import { Links } from '#remix-run/react'
<head>
<Links />
...
</head>
your links() function will not be included otherwise.
module.exports = {
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./layout/**/*.{js,ts,jsx,tsx}",
"./const/**/*.{js,ts,jsx,tsx}",
"./fonts/**/*.{js,ts,jsx,tsx,ttf}",
"./utils/**/*.{js,ts,jsx,tsx}",
],
darkMode: false,
theme: {
extend: {
colors: {
"brand-green": "#4DF69B",
"brand-amber": "#FF8656",
"brand-red": "#FF5656",
"brand-gray": "#7E7E7E",
},
width: {
content: "fit-content",
},
top: {
20: "5rem",
},
fontFamily: {
DINAlternate: ["DINAlternate", "sans-serif"],
},
},
},
variants: {
extend: {
borderWidth: ["hover"],
textColor: ["group-focus"],
},
},
plugins: [],
};
My config.
I changed my next.config.js to to next.config.ts then it told me that it should have .js format I rewrite it and as I think after I tried to move every file to .ts format my tailwind broke. It works with margins/paddins but not with bg though it works with text-red-200
If I inspect elements I can see bg-brand-red classes but it just doesn't apply them.
It worked well but after I refactor code it broke but once I reset everything to prev commit I still get this problem where background colors doesn't work.
It is weird since it worked one time and in 5mins it got broken even when I rollbacked to last commit on github it still be broken
How can I know what is the problem?
In my global css file where I import:
#tailwind base;
#tailwind components;
#tailwind utilities;
I moved this piece of code below body{...} and everything works now
body {
font-family: "DIN Alternate", sans-serif;
font-size: 16px;
}
#tailwind base;
#tailwind components;
#tailwind utilities;
To the first thing you should check if the same error occured is how you import tailwind css
I moved body to the bottom since fonts didn't work and it WORKED. Weird problem. I think tailwind just needed some refresh in styles
UPD:
#tailwind base;
#tailwind components;
#tailwind utilities;
body {
font-family: "DIN Alternate", sans-serif;
font-size: 16px;
}
you are importing and declaring in the wrong order - tailwind has some kind of weird problem in compilation about scss ordering - so instead if body first it should come after components and before utilities.
#import 'tailwindcss/base';
#import 'tailwindcss/components';
body {
font-family: "DIN Alternate", sans-serif;
font-size: 16px;
}
#import 'tailwindcss/utilities';
Here is what you can do:
Change tailwing.config.js
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
]
to this
content: [
"./resources/**/*.blade.php",
"./resources/**/**/**/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
and finally run the following command
npm run dev
Any change inside the tailwind.config.js requires the dev server to be restarted. Restarting the server helped me.
How to use Color in TailWind CSS ?
I am learning TailWind CSS.I am using TailWind CSS in Laravel.
My tailwind.config.js is like below
const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
cadetblue:'#5f9ea0',
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
I declared CSS inside <head></head> is like below.
<style>
.hello { background-color: theme('colors.cadetblue'); }
</style>
I am using .hello class in HTML like below.
<div class="hello">Hello</div>
But this is not working.
Firstly, you need to define colors object array in your custom theme file, because your tailwind config will overide the default. So please check your colors import is same with official doc,
const colors = require('tailwindcss/colors')
Solution 1
Define your custom color name into theme.colors
const colors = require("tailwindcss/colors");
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
...
theme: {
...
colors: {
cadetblue: "#5f9ea0",
},
...
Solution 2
In other way, you can simplly adjust it with define in your main css file like this, Official Doc Link
// in your css file
#tailwind base;
#tailwind components;
#tailwind utilities;
...
# You can add your custom class name into `utilities`
#layer utilities {
.bg-cadetblue {
background-color: #5f9ea0;
}
}
and use it
<div class="bg-cadetblue">Hello</div>
ps, restart your app with npm run start or yarn start required!
Happy coding :)
In tailwind-3 you could pass the exact color inline if you use [ ]:
<div class="bg-[#5f9ea0]">Hello</div>