I have next.js with tailwind CSS installed. I configured everything accordingly to the instructions. All codes are below.
_app.js
import '../styles/index.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: ["tailwindcss"],
}
index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
</div>
)
}
index.css
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
When I look up on index.css for any changes from browser (I use chrome) it stays the same. I'm not sure what's wrong.
Firstly make sure that You installed tailwindcss with next.js properly.
Here you have reference to docs
Then Just use it, example index.js page.
import Head from "next/head";
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="flex items-center justify-center h-screen flex-col gap-5">
<h1 className="text-3xl text-red-500 font-semibold">Tailwind CSS</h1>
</div>
</div>
);
}
Output:
on tailwind.config.js make sure that in content include the extensions
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Related
I'm in the making of responsive web page using emotion.js styled components.
On Desktop emulator using Chrome, it looks perfectly fine as I meant it to be but when on mobile web inspector screen shows me that media query is not showing.
I tried every single duplicated question on S/O, none of them work for my case.
My meta tag seems okay like this
<meta name="viewport" content="width=device-width,initial-scale=1.0" />,
also tried with <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> got me the same result.
FYI I use github pages for deployment.
[EDIT]
index.js
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
);
App.js
function App() {
return (
<Routes>
<Route
path="/"
element={
<div className="App">
<Home />
<AnimatedCursor color="0,198,171" innerSize={20} outerSize={20} />
</div>
}
/>
</Routes>
);
}
Home.jsx
import Intro from './Intro';
import Outro from './Outro';
import Profile from './Profile';
import TechStack from './TechStack';
const Home = () => {
return (
<>
<Intro />
<Profile />
<TechStack />
<Outro />
</>
);
};
export default Home;
Cover.jsx
const Cover = styled.div`
font-family: Cover;
font-size: 8vw;
text-align: center;
color: #005b96;
#media (${devices.mobileL}) {
font-size: 50px;
}
`;
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.
I'm having the following issue when trying to load Google Fonts. I read that I'm supposed to write something like this in _document.js to import it inside a head tag
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<link
rel="preload"
href="/fonts/noto-sans-v9-latin-regular.woff2"
as="font"
crossOrigin=""
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
but this is the code I had to use to make Styled Components work with Next.js
import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
}
So my question is: how can I modify my _document.js file to use the styles of Google Fonts?
Also, if it's of any help, this is the GlobalStyle I'm using and that doesn't import the fonts
import { createGlobalStyle } from '#xstyled/styled-components';
const GlobalStyle = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Lato&family=Rubik&display=swap');
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
position: relative;
background: grey;
}
body {
font-family: 'Lato', sans-serif;
}
`;
const BasicLayout = ({ children }: { children: any }) => {
return (
<>
<GlobalStyle />
{children}
</>
);
};
export default BasicLayout;
Head to this page.
https://nextjs.org/docs/advanced-features/custom-app
Please read about custom _app.js and then do as following:
First, You need to create a custom _app.js for your app. (This must be in the root of your pages directory)
Then you need to create _app.css in the same directory
Then import the css file into your _app.js
import "./_app.css";
Then in your _app.css file, import your google font like the following:
#import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&display=swap");
in the css file and in the body tag add the following line:
body {
font-family: "PT Sans Narrow", sans-serif;
etc..
}
I came across the same issue, but wasn't a fun of Hooman's answer as that requires the need of having a .css file only to contain the google font import.
Instead, here's the proper way to load your fonts while using styled-components:
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
DocumentInitialProps,
} from "next/document";
import { ServerStyleSheet } from "styled-components";
class MyDocument extends Document {
// Load styles before rendering
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html lang="en">
<Head>
{/* Google Fonts */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#400;500&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Make sure your render method is not defined as static.
I have a react project that renders different components depending on its route. I have my main css defined as:
html, body, #root, #root>div {
height: 100% !important;
width:100% !important;
}
My app's height and width is working when its first rendered ( component). However, when a different component renders (), the App's height and width will not change/update to the maximum of the browser's height and width.
In the below screenshot, as you can see in my google develop tool, the root HTML's width and height are not even the full browser page size. when this component is rendered.
https://i.imgur.com/OeCjb7o.png (Can't post image due to low reputation!, pls see the link instead!)
Any help will be much appreciated!
Below is the index.html used in my react app:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="%PUBLIC_URL%/diamond.ico" />
<link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="/css/video-react.css" />
<title>REACT APP</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
And below is the App.js code and how I handled my routes:
// /client/App.js
import React, { Component } from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
// import SearchBar from './SearchBar';
import SummonerNew from './SummonerNew';
import Search from './Search';
import NavBar from './NavBar';
import Home from './Home';
// import ChampionControl from './ChampionControl';
import ChampionControlGG from './ChampionControlGG';
import Footer from './Footer';
import FreeRotation from './FreeRotation';
// import styles from './styles.css';
import { connect } from 'react-redux';
class App extends Component {
render(){
const { region , search } = this.props
const App = ()=>(
<div id="main-inner-wrap">
<NavBar />
<Search />
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/home' component={Home}/>
<Route path='/champions' component={ChampionControlGG}/>
<Route path='/profile/:region/:id' component={SummonerNew}/>
<Route path='/rotation' component={FreeRotation}/>
<Route component={Home} />
</Switch>
<Footer/>
</div>
)
return(
<Switch>
<App/>
</Switch>
)
}
}
const mapStateToProps = (state) =>{
return {
region:state.menu.region,
search:state.menu.search
}
}
export default withRouter(connect(mapStateToProps)(App));
On the following site: http://getbootstrap.com/css/#buttons
There is a space between the demo buttons on the boostrap site, but when I used them on my site, there's no space between. I've used developer tools to examine the styles but can't figure out what's causing that space.
Here's the code:
app.ts
//our root app component
import {Component, NgModule} from '#angular/core'
import {BrowserModule} from '#angular/platform-browser'
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<button type="button" class="btn btn-primary" *ngFor="let room of rooms">{{room.Name}}</button>
</div>
`,
})
export class App {
name:string;
rooms:Array<any> = [
{Name: 'Room 1'},
{Name: 'Room 2'},
{Name: 'Room 3'},
{Name: 'Room 4'},
]
constructor() {
this.name = 'Angular2'
}
}
#NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
index.html
<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js#2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs#0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
Here is a plunker showing my code: https://plnkr.co/edit/68Au4swU0Oi63PQFOn5L?p=preview
Can anyone help?
The reason for this behavior in contrary of the demo you provided, is that you are iterating the buttons. If you add them without the loop, they render just like as you would wish. I would suggest you actually use CSS for this purpose. Just add a margin between the buttons in CSS:
.btn{
margin: 5px;
}
Your updated Plunker
in angular to fix that issue you need to add preserveWhitespaces: true the tsConfig :
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
"preserveWhitespaces": true // add this line in tsconfig.json
}
Their display property set to inline-block which add 4px space by default.....that's why people don't use display: inline-block to create flexible grid