Tailwind-CSS doesn't apply flex/block after applying .hidden to the element - css

Question

I want my div to be hidden on small screens and visible on bigger screens starting from md:
But seems like .hidden has a higher priority. Or it just messing up with some of my dependencies.
<div className="hidden md:flex">
I've tried couple of approaches:
Using .block and other display
values instead.
I tried assigning the styles directly from the .css file and giving div a custom container.
Strangely, but some of the properties work fine on responsive changes with md: or lg:
I have a guess it might be something wrong with a bunch of postcss plugins I had to install.
Link to the githhub repo: https://github.com/kkdima/Sweet-Love-And-Roses
Here's my package.json file:
{
"name": "manage-landing-page",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"eslint": "eslint"
},
"dependencies": {
"#next/bundle-analyzer": "^9.5.3",
"#popmotion/popcorn": "^0.4.4",
"#zeit/next-css": "^1.0.1",
"#zeit/next-sass": "^1.0.1",
"atomize": "^1.0.26",
"babel-loader": "^8.0.6",
"eslint-loader": "^4.0.2",
"framer-motion": "^2.6.15",
"next": "^9.5.4",
"next-compose-plugins": "^2.2.0",
"next-images": "^1.5.0",
"next-videos": "^1.4.0",
"node": "^14.13.0",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hamburger-menu": "^1.2.1",
"recompose": "^0.30.0",
"sass": "^1.26.11",
"shopify-buy": "^2.11.0",
"swiper": "^6.3.2"
},
"devDependencies": {
"#babel/plugin-transform-react-jsx": "^7.10.4",
"babel-eslint": "^10.0.3",
"eslint": "^7.9.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-babel": "^9.0.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"eslint-plugin-standard": "^4.0.1",
"postcss-flexbugs-fixes": "4.2.1",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
"tailwindcss": "^1.8.10"
}
}
Here's my postcss.config.js file:
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('postcss-preset-env')({ stage: 1 }),
require('postcss-flexbugs-fixes'),
],
};
Here's my next.config.js file:
const withPlugins = require('next-compose-plugins');
const withSass = require('#zeit/next-sass');
const withImages = require('next-images');
const withCSS = require('#zeit/next-css');
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
const withVideos = require('next-videos');
// next.config.js
module.exports = withPlugins([withImages, withSass, withCSS, withVideos], {
plugins: ['postcss-import', 'tailwindcss', 'autoprefixer'],
serverRuntimeConfig: {
// Will only be available on the server side
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
},
publicRuntimeConfig: {
// Will be available on both server and client
staticFolder: '/public',
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000',
},
{
test: /\.(eot|woff|woff2|otf|ttf|svg|png|jpg|gif|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]',
},
},
},
{
test: /\.style.js$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: { parser: 'sugarss', exec: true },
},
],
},
],
},
webpack(config) {
config.module.rules.push(
{
test: /\.(eot|woff|woff2|otf|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]',
},
},
},
{
test: /\.style.js$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: { parser: 'sugarss', exec: true },
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'],
},
);
withBundleAnalyzer({});
return config;
},
});

Answer 1

I did this in a native js application. I added this in the terminal:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
(replace input.css and output.css with your files).
Maybe this gives you an idea as to why its not working in nextjs? For the media query md:flex was not appearing in the dev tools until I started rebuilding the files using this command provided by tailwind.