Mobile screen of 480px is not working

[tengkuzulfadli]

Hi guys,

I did set up a mobile screen to xs for 480px but it's not working. I tried the following method but still not working:

//inside tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme'); module.exports = { purge: { mode: 'layers', content: ['./public/**/*.html'], }, darkMode: false, // or 'media' or 'class' theme: { screens: { xs: '480px', ...defaultTheme.screens, }, } }

Then, I changed to as per below, still not working;
module.exports = { purge: { mode: 'layers', content: ['./public/**/*.html'], }, darkMode: false, // or 'media' or 'class' theme: { screens: { 'xs': '480px', 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', },

Here is my json file as I might missed something in my json file.

Appreciate your input! TIA

[simonswiss]

Hey!

I pasted the first piece of code you shared (and removed the purge settings) in a Tailwind Play, and you can see it working properly there:

https://play.tailwindcss.com/mXmkSx4G6x?file=config

In your package.json scripts, you should remove the word build, and instead specify an --input (or -i) flag for the source CSS file:

"build": "tailwindcss --input src/css/tailwind.css --output public/css/tailwind.css"

If that doesn't fix it, please share some real code in a repo where the problem happens 👍