<div class="text-center sm:text-left"> Lorem ipsum dolor sit amet. </div>
So basically on this example. Instead of saying:
Text should be centered only on smaller devices.
Do this:
Text should be always centered, and aligned left for bigger devices.
https://codepen.io/anon/pen/wLeoYV
The problem is: Tailwind is a mobile-first framework as here, which means that the unprefixed class props will be used as mobile style, and the style of the prefixed(starting with sm, md, lg) will be used for that screen breakpoint and above (NOT BELOW)
So in your case it should be in the opposite way
class='text-left sm:text-center'
A couple of days ago, I encountered a similar issue within my React project.
Specifically, I had integrated TailwindElements into the project.
Upon conducting some investigation, I determined that the presence of TailwindElements was interfering with the functionality of my TailwindCSS breakpoints.
Consequently, I decided to remove TailwindElements from my project, which resolved the issue, and my code began functioning as expected.
Happy coding!
I have the same problem.
Check the 'tailwind.config.js' file.
In my case, I forget to add the directory of the file i'm using
i found in my case i had added a meta tag for <meta name="viewport" content="minimal-ui" /> which was changing the breakpoints and this was a mistake
Output.css was not updated
I was working on this project built using create-react-app, so idk there might be some issue which does not updates output.css.
So i deleted output.css, package-lock.json and node_modules.
Then I did a:
- npm install
- sudo npx tailwindcss -i ./src/index.css -o ./src/output.css
(Note: my input.css is called index.css)
and the breakpoints are now working.