All the classes in my project (react + vite) work except the media queries, and I am having a hard time figuring out why. I tried manually adding all the breakpoints (with the default values) in the tailwind config file which had no effect at all.
function Sidebar(props) {
return(
<>
<aside className="text-xl p-4">
<h1 className="font-chivoMono ">Noteit</h1>
<h3 className="text-xl md:text-7xl text-white sm:text-red-500 md:text-green-300 lg:text-pink-300">{props.displayName}</h3>
</aside>
</>
)
}
export default Sidebar
I took all the configuration steps correctly (and I think no classes would have worked if i didn't)
I tried to run the command
npx tailwindcss -i ./src/styles.css -o ./dist/output.css
thinking it might do something but honestly I am just completely clueless to why this is not working
Also, the media queries do not show up while inspecting the page.
Related
I am playing around with Tailwind and Next.js, but I am having trouble figuring out if it's installed or not. Even when I go to https://play.tailwindcss.com/ and try the following HTML element styled with Tailwind.
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
It doesn't render it underlined or even an h1 element. I follow the instructions at https://tailwindcss.com/docs/guides/nextjs verbatim. Any ideas?
The reason it's not working for you is that you are using className instead of class.
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
Using NPM, you can see if a specific package is installed.
npm view tailwindcss version
Or
npm info tailwindcss version
If you're using NPX, you can do the following.
npx gvi tailwindcss
I try to use some tailwind classes, but there's classes that not working properly.
<h2 class="text-6xl">Test</h2> Is working
<h2 class="text-4xl">Test</h2> Isn't working
<h2 class="text-orange-500">Test</h2> Is working
<h2 class="mt-4">Test</h2> Isn't working
Ah, i have to --watch my tailwind before.
I am using NextJS and TailwindCSS. For deployment i am using vercel. CSS and fonts are working if I use them directly in index.js file. CSS and fonts are not working if I use different component and import them in index.js file. But they are working fine on localhost. I dont really understand what I am doing wrong here. Here's my code.
// index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import NameList from "../designs/NameList"
export default function Home() {
return (
<>
<NameList />
</>
)
}
// NameList.js
const NameList = () => {
return (
<div>
<div className="border-gray-400 border-2">
<h5 className="max-w-md mb-2 text-3xl font-heading font-extrabold leading-none sm:text-4xl">
<div className="flex">Name</div>
</h5>
</div>
</div>
)
}
export default NameList
If i return NameList divs in Home, everything is working perfectly on both local and production.
Yes, Moving all the necessary files to /components work. Simple tailwind comes with a 5Mb package. In order to minimize the file size it will remove all the unused CSS in the package in build time. And it will keep CSS included in the folders mentioned in tailwind.config.js. That's what happens in your code. You got two options.
You can move files to /components
Create a dedicated folder and include all the necessary files and then include the folder in tailwind.config.js
I moved my NameList.js file into /components folder. And everything is working as expected.
I have an app built using React with Parcel. I am attempting code splitting via modules, but have a strange issue.
On my home page, I am importing a module that has its own css. When the component is showing on the page, there is one single css rule that is showing as 'undefined' in the inspector.
When I run this in my local, or on another page in my app such as About, the rule is recognized and everything works perfectly.
I've tried everything I can think of, but I am lost as to what to try next.
Here's the code in my js file:
<div className={styles.content__move + " content__move"}>
<div className={styles.columns + " columns"}>
<div className={styles.column + " column"}>
The rule being ignored is 'styles.columns'. As you can see it is in between styles.content__move and styles.column, and BOTH of those are working as expected.
When inspecting I see this:
<div class="_content__move_31d79 content__move">
<div class="undefined columns">
<div class="_column_31d79 column">
<div class="_column__img_31d79 column__img _bg4_31d79">
But if I add the module on another page, it shows correctly as:
<div class="_content__move_31d79 content__move">
<div class="_columns_31d79 columns">
<div class="_column_31d79 column">
<div class="_column__img_31d79 column__img _bg4_31d79">
What might I be missing?
I'm not sure what the problem was, but I renamed the class in the JS and CSS, rebuilt, and it started working right away. I would suggest to try this before changing style loaders for anybody that has the same problem.
I added:
class="styles.columns_f"
in the JS, and in the SCSS:
.columns_f {...}
Ran a production build, and that was the fix.
I've recently installed Tailwind for my Vue project. It took some time to get it work but finally, it worked, even with code completion in VS Code.
The problem I am facing right now is that I cannot use the breakpoints anywhere in my project.
<div class="container mx-auto">
<div class="card w-full sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
// Content
</div>
</div>
Watch a gif of it.
What I want to achieve is to have the div be 1/3 when on desktop, full width on mobile. What I am getting is full width everywhere. I can't seem to find anything else like this on the internet either.
I'd like to mention that I am using VueJS, if that's of any help. Any ideas?
Thanks in advance.
Eventually found the solution after a break and finding a Vue project that uses Tailwind. I needed to install postcss-preset-env and add it to postcss.config.js.
npm install postcss-preset-env --save-dev
postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')({ stage: 0 }),
require('tailwindcss')('tailwind.js'),
require('autoprefixer')
]
}