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
Related
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.
So im building a small React application to test theming. I've always used css variables but after watching a tutorial on sass i realized it has potential to do easy theming and to prove my point there are many tutorials online.
But im having a problem. I generally have my projects in a structure where every component has a css file like:
- src
- components
- Home
- Home.tsx
- Home.module.scss
Now this is my code:
_themes.scss
$themes: (
light: (
bg-color: #c0c0c0, ...
),
dark: (
bg-color: #37474f, ....
),
);
// mixins.scss
#use "sass:map";
#import "./themes";
#mixin themed($key, $color) {
#each $theme-name, $theme-color in $themes {
.theme-#{$theme-name} & {
#{$key}: map.get(map.get($themes, $theme-name), $color);
}
}
}
// index.scss
#import "./styles/mixins";
body {
margin: 0;
padding: 0;
font-family: "Readex Pro", sans-serif;
#include themed("background-color", "bg-color");
}
code {
margin: 0;
padding: 0;
font-family: "Source Code Pro", monospace;
}
// App.tsx
export default function App() {
const dispatch = useDispatch()
const session = useSelector(sessionSelector)
const theme = useSelector(themeSelector)
useEffect(() => {
document.documentElement.className = '';
document.documentElement.classList.add(`theme-${theme.name}`)
}, [theme])
return (
<Fragment>
<Header />
<Routes>
<Route path={paths.home} element={<Home />} />
<Route path="protect" element={<RequireAuth roles={['test']} />}>
</Route>
</Routes>
<Footer />
</Fragment>
)
}
In index.tsx i import index.scss and my body is getting style as well as changing when i change the theme to dark, the color changes.
My problem is: when i am in another component the scss works but without applying the themes. As i show previously i change the theme in my app and it does change.
Yet when I am in my header component, who's top div has this .wrapper class in the className, none of the themed stuff shows as I show in the image.
Any ideias?
PS: i probably should mention im very new to sass and don't really understand very advanced stuff just yet.
#import "../../styles/mixins";
.wrapper {
width: 100vw;
height: 100vh;
color: red;
#include themed("background", "header-color");
}
Everything I apply in the index.scss file it works, any other sass module it doesnt. But only the theme mixin, all others i have work
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 struggling to get a local font to work on my Next.js website and can't seem to find much on it. I used #font-face in my globals.css style-sheet. (I referenced https://kirazhang.com/posts/nextjs-custom-fonts).
#font-face {
font-family: "Adobe Caslon Pro";
src: url("/static/fonts/ACaslonPro-Regular.otf") format("opentype");
font-style: medium;
font-display: swap;
}
then in _app.js
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
I also added a _document.js file to my pages folder
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head />
<link
rel="preload"
href="/static/fonts/ACaslonPro-Regular.otf"
as="font"
crossOrigin=""
/>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
When everything is said and done it gives me Times in New Roman when I inspect the webpage.
I think the installation of your font is good, but you have to call a class/className or style with this font-family inside your component.
Exemple:
<div style={{fontFamily: "Adobe Caslon Pro"}} >
Exemple
</div>
Is it possible to use pure CSS variables with Vue without having to link any stylesheets or use SASS/PostCSS? Unsure why I'm unable to get this to work in its most basic form.
<template>
<div id="test">
TEST
</div>
</template>
<style scoped>
:root {
--var-txt-color: #c1d32f;
}
#test {
color: var(--var-txt-color);
}
</style>
I know you highlighted "without having to link any stylesheet", but I run into the same issue and there is a simple option - use just one external css file and include it in your App.vue, then you can access the variables anywhere else, in scoped styles as well.
variables.css
:root {
--font-family: "Roboto", "Helvetica", "Arial", sans-serif;
--primary-color: #333a4b;
}
App.vue
<style>
#import './assets/styles/variables.css';
</style>
LandingView.vue
<style scoped>
#landing-view {
font-family: var(--font-family);
font-weight: 300;
line-height: 1.5em;
color: var(--primary-color);
}
</style>
This won't work as expected because of scoped attribute for stylesheet. Example above compiles into:
[data-v-4cc5a608]:root {
--var-txt-color: #f00;
}
And, as you understand, it will not target actual :root element.
It can be solved by:
Not using scoped attribute for this stylesheet. Notice that it may cause styles conflict with other variables declarations for :root element.
Using current component's wrapping element as root. If we declare variables this way:
.test {
--var-txt-color: #c1d32f;
color: var(--var-txt-color);
}
.test-child-node {
background-color: var(--var-txt-color);
}
Then it will can reuse variables for other elements of the same component. But still, it won't be possible to use declared variables inside child components without removing scoped, if it is the case.
Why not just use this?
<style scoped>
* {
--var-txt-color: #c1d32f;
}
</style>
The generated CSS is:
*[data-v-d235d782] {
--var-txt-color: #c1d32f;
}
This has been working for me.
I just discovered that it looks like this also works, using the "deep selector"
>>> {
--var-txt-color: #c1d32f;
}
Generated CSS is:
[data-v-d235d782] {
--var-txt-color: #c1d32f;
}
I think I like this method more.
One workaround is to define them under a non-scoped style element like the following. However one thing to note here is, these variables will be exposed to other Vue components as well.
<style>
:root {
--var-txt-color: #c1d32f;
}
</style>
<style scoped>
#test {
color: var(--var-txt-color);
}
</style>
Late answer - Here is a working example with css vars derived from standard vue structures.
<template>
<div>
<component :is="'style'">
:root {
--color: {{ color }};
--text-decoration: {{ textDecoration }};
--font-size: {{ fontSize }};
}
</component>
<p>example</p>
</div>
</template>
<script>
export default {
props:{
color: {
type: String,
default: '#990000'
}
},
data: function () {
return {
textDecoration: 'underline'
}
},
computed: {
fontSize: function (){
return Math.round(Math.random() * (5 - 1) + 1) + 'em';
}
}
}
</script>
<style>
p{
color: var(--color);
text-decoration: var(--text-decoration);
font-size: var(--font-size);
}
</style>
Starting from the top...
Vue must have 1 root element, so I needed a div tag in order to include a sample p tag. However, you can just use the component-is-style tag and get rid of the div and p tags. Note the need for extra quotations "'style'".
The normal vue style tag can be scoped or not - as needed.
Well, now you can use CSS variable injection.
<template>
<div>
<div class="text">hello</div>
</div>
</template>
<script>
export default {
data() {
return {
color: 'red',
font: {
weight: '800'
}
}
}
}
</script>
<style>
.text {
color: v-bind(color);
font-weight: v-bind('font.weight');
}
</style>
Those styles are also both reactive and scoped. There won't be any unintended inheritance issues. Vue manages the CSS variables for you.
You can take a look at the RFC here.