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

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.