I am using NextJS and TailwindCSS. For deployment i am using vercel. CSS and fonts are working if I use them directly in index.js file. CSS and fonts are not working if I use different component and import them in index.js file. But they are working fine on localhost. I dont really understand what I am doing wrong here. Here's my code.
// index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import NameList from "../designs/NameList"
export default function Home() {
return (
<>
<NameList />
</>
)
}
// NameList.js
const NameList = () => {
return (
<div>
<div className="border-gray-400 border-2">
<h5 className="max-w-md mb-2 text-3xl font-heading font-extrabold leading-none sm:text-4xl">
<div className="flex">Name</div>
</h5>
</div>
</div>
)
}
export default NameList
If i return NameList divs in Home, everything is working perfectly on both local and production.
Yes, Moving all the necessary files to /components work. Simple tailwind comes with a 5Mb package. In order to minimize the file size it will remove all the unused CSS in the package in build time. And it will keep CSS included in the folders mentioned in tailwind.config.js. That's what happens in your code. You got two options.
You can move files to /components
Create a dedicated folder and include all the necessary files and then include the folder in tailwind.config.js
I moved my NameList.js file into /components folder. And everything is working as expected.
Related
All the classes in my project (react + vite) work except the media queries, and I am having a hard time figuring out why. I tried manually adding all the breakpoints (with the default values) in the tailwind config file which had no effect at all.
function Sidebar(props) {
return(
<>
<aside className="text-xl p-4">
<h1 className="font-chivoMono ">Noteit</h1>
<h3 className="text-xl md:text-7xl text-white sm:text-red-500 md:text-green-300 lg:text-pink-300">{props.displayName}</h3>
</aside>
</>
)
}
export default Sidebar
I took all the configuration steps correctly (and I think no classes would have worked if i didn't)
I tried to run the command
npx tailwindcss -i ./src/styles.css -o ./dist/output.css
thinking it might do something but honestly I am just completely clueless to why this is not working
Also, the media queries do not show up while inspecting the page.
I use next js and mycode like below
import styles from "../components/style/dark.module.scss";
export default function ThemeButton() {
return (
<div>
<button id="dark-mode-toggle" className={styles["dark-mode-toggle"]}>
</button>
<h1 className={styles["title"]}>
Title
</h1>
enter code here
</div>
);
}
Here I am creating an CSS module and importing it and using like above and it works fine.
But everytime I need to type className={styles["dark-mode-toggle"]} instead of just typing class="dark-mode-toggle" , I am migrating from plain html code to React and there are 1000's of class like this.
Is there any way to use class="dark-mode-toggle" and make styles work , without using global styles , I want the styles to be imported only when component is used to make my app lightweight.
You can use cmd + shift + H in VScode and replace all occurrences in the project.
I'm trying to figure out what exactly is happening, but I'm all out of ideas. I've recently transitioned to Tailwind and I set it up according to instructions for create-react-app, which can be seen here.
I've also tried another setup, but I got the same problem. That setup can be seen here.
For whatever reason, everything is working normally in local development (when running code with npm start). But when I build the code, I'm getting some really weird stylings.
This is in local development
This is when npm run build is run.
Specific part of the code which isn't displaying as it should:
<div className='w-full lg:w-1/4 m-auto p-5 text-center lg:shadow-2xl rounded-xl'>
<HelmetComponent
title='Log in | Notify Me'
description='Login page for Notify Me.'
/>
<NavbarLoggedOut/>
<h1 className='font-bold'>Log in</h1>
<LoginForm
onSubmit={onLogin}
/>
<div className='text-base mt-2'>
<p>
Don't have an account? <LinkButton onClick={() => history.push('/signup')} label='Sign up here!' />
</p>
</div>
<div className='mt-4'>
<GoogleOAuthComponent
buttonText='Log in with Google'
setErrorMessage={updateErrorMessage}
/>
</div>
<div className='mt-4'>
<LoadingBar
isLoading={waitingForServerResponse}
/>
</div>
<div>
{displayInfoMessage()}
</div>
</div>
I've opened both files with inspect element, and everything seems to be the same. And problem is everywhere where there is any kind of h1 element as far as I saw.
This is my tailwind.config.js:
const colors = require('tailwindcss/colors')
module.exports = {
important: true,
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
main: {
light: '#508991',
DEFAULT: '#1b262c',
'100': '#DBF9F4',
'700': '#60949B',
},
black: colors.black,
white: colors.white,
gray: colors.trueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
blue: colors.blue,
green: colors.green,
},
},
variants: {
extend: {},
},
plugins: [],
}
I've also tried setting purge: false to see if that was causing the problem, but it didn't change anything.
If anyone has any kind of idea what could be causing this, I'd appreciate it.
EDIT: I've also noticed that the padding differs on development and build, so if anyone has any idea why that's happening, that would be also nice.
FINAL EDIT: Problem was in the leftover boostrap files, since the project used that before switching to tailwind. In development environment bootstrap css was loaded on top of everything else, which lead to strange behavior.
There was leftover import in the index.tsx: import 'bootstrap/dist/css/bootstrap.min.css'
After that import was removed, and boostrap package was removed from package.json file and node_modules folder was deleted and packages were reinstalled problem disappeared. True layout was actually generated by npm run build
Problem was in the leftover boostrap files, since the project used that before switching to tailwind. In development environment bootstrap css was loaded on top of everything else, which lead to strange behavior.
There was leftover import in the index.tsx: import 'bootstrap/dist/css/bootstrap.min.css'
After that import was removed, and boostrap package was removed from package.json file and node_modules folder was deleted and packages were reinstalled problem disappeared. True layout was actually generated by npm run build
Tailwind resets all headings to have the base font size (16px by default) so unless you are explicit, that’s what you get. That means you’re actually getting extra styling in development that isn’t supposed to be there unless you have custom styles somewhere.
Add text-xl Or whatever size you want it to be to the h1
I have a Gatsby app with scss.
At the moment I have the following :
import React from "react";
import styles from "./mosaic.module.scss";
import Tile from '../tile/tile';
const Mosaic = (): JSX.Element => (
<section className="wrapper style1">
<div className="inner">
<h2 className="major">Smaller Projects</h2>
<p>Here under follow minor projects, often unfinished; I show them anyway because they helped me widen my experience. :)</p>
<section className={`${styles["features"]}`}>
{[0,1,2,3,4,5,6].map(e => <Tile key={e}></Tile>)}
</section>
</div>
</section>
)
export default Mosaic;
If I do not import class from the module like this className={${styles["features"]}} it will not work.
But as you can see some className still work with className="inner"
This is because under gatsby-browser.js I imported some global css like this
import "./src/styles/global.css"
The problem is, it's really confusing to know when a class should be called with styles or in the normal way.
Is there a way to just use the default way for everything ? or opposite ?
If you want regular global CSS, rename your file to mosaic.scss, import the file, and then apply your classNames as usual.
import "./mosaic.scss";
...
<section className='features'>...</section>
When you use the *.module.scss extension, you are actually telling gatsby-plugin-sass that you wish to use CSS Modules.
If you wish to use CSS Modules, then you have to do:
import styles from "./mosaic.css";
...
<section className={styles.features}>...</section>
or
import {features} from "./mosaic.css";
...
<section className={features}>...</section>
Edit: After your clarification in the comments, I don't think gatsby-plugin-sass or CSS Modules do what you want. You might have better luck looking for another tool to handle your css (eg stylable.io)
Okay, just to state the problem right away, I have a situation where stylesheet B which is being loaded (or so I thought) AFTER stylesheet A, and should therefore be overriding A's styling because of cascading, is in fact being loaded into the browser BEFORE A. The order is wrong.
I have a simple React component structure as follows:
App
> Header
> Home
> Footer
In my 'index.js' I have the basic order of statements:
import './assets/theme/theme_specific/scss/style.scss';
render(
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute getComponent={lazyLoadComponent(Home)} />
<Route path="/resume" getComponent={lazyLoadComponent(Resume)} />
</Router>,
document.getElementById("app")
);
Here's the structure in App.js:
class App extends React.Component {
render() {
return (
<div>
<Header />
{this.props.children}
<Footer />
</div>
);
}
}
And at the top of Header.js I have the following:
import './Header.scss';
The Webpack loader that's processing .scss files is:
test: /\.scss$/,
loader: 'style!css?sourceMap!resolve-url!sass?sourceMap',
I've confirmed that there is no !important being used anywhere, and the styling itself is exactly the same.
What's happening is that "Header.scss" is being loaded FIRST, and 'style.scss' SECOND. In other words 'style.scss' is overriding the styles in 'Header.scss', versus the other way around as they appear in the code. The 'Computed' tab in Chrome inspector confirms this is the case.
Anybody have any idea what's going on here?
The CSS is imported in the order you specify. If you'd like your custom styling to have the highest precedence, put import './Header.scss'; beneath all the other imports.
Feeling very stupid now. I answered my own question just a few minutes after posting. #David L. Walsh above is correct.
The problem was that in 'index.js' I was importing the React component files before the CSS files (including 'style.scss' mentioned above).