0
147
ViewsTailwindCss's mobile breakpoints do not work
I am building a custom navbar in Gatsby using TailwindCss for styling. For reference I am following a tutorial on YouTube which's code can be found here.
When I use the mobile breakpoints as prefix like in the example below only the div saying "mobile" works as it should be:
Layout.js
<nav>
<div className={"flex"}>
<div className={"hidden md:flex"}>desktop</div>
<div className={"md:hidden"}>mobile</div>
</div>
</nav>
tailwind.config.js
module.exports = {
content: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
darkMode: "class",
theme: {},
plugins: []
};
styles/global.css
@tailwind base;
@tailwind components;
@tailwind screens;
@tailwind utilities;
The output "desktop" should be shown when the text "mobile" vanishes but for some reason it doesn't. Am I doing something wrong or is there a problem with Tailwind?
EDIT: Reproduction example here
2 answers
Answer question0
The problem seems to be in your global.css file.
You should not add the @tailwind screens;. Since you are using the latest TailwindCSS, @tailwind screens; was deprecated since 2.2 in JIT mode and it's now named: @tailwind variants;
As of v2.2, the @tailwind screens directive has been renamed to @tailwind variants, since it is now the injection point for all variants, not just responsive variants.
Some more info on when the @tailwind variants; should be added:
The @tailwind variants feature is considered an advanced escape hatch and we recommend omitting it by default. You should only use it if your project won't work properly without it, which is only ever really true if you are introducing Tailwind to a legacy system with a very fragile existing CSS codebase that has styles that absolutely need to be at the very end of the stylesheet for things to work.
Also, according to the Tailwind installation with Gatsby instructions You should not add the @tailwind variants;
That being said, you should not need it in this case so, by just removing it in you global.css file will fix the issue.
Your new global.css file should be:
@tailwind base;
@tailwind components;
@tailwind utilities;
0
Problem solved after I have noticed that the autoprefixer plugin was missing in the postcss.config.js. Just redid the installation for Gatsby.