Working on my portfolio website and almost done, but running into issues with Tailwind CSS. Applied styling works mostly, but some disappear at certain breakpoints without explanation. It's mainly affecting overflow effects, hover states, and list styles.
Sharing the components managing the work experience section of my site:
// Parent Component
import React from 'react'
import { motion } from 'framer-motion'
import ExperienceCard from './ExperienceCard'
import { Experience } from '../typings'
type Props = {
experiences: Experience[]
}
const WorkExperience = ({ experiences }: Props) => {
return (
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.5 }}
className='h-screen flex relative overflow-hidden flex-col text-left md:flex-row max-w-full px-10 justify-evenly mx-auto items-center'
>
<h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>
Experience
</h3>
// Rest of the parent component code
</motion.div>
)
}
// Child Component
import React from 'react'
import Image from 'next/image'
import { motion } from 'framer-motion'
import { Experience } from '../typings'
import { urlFor } from '../sanity'
type Props = {
experience: Experience
}
const ExperienceCard = ({ experience }: Props) => {
console.log(experience);
return (
<article
className='flex flex-col rounded-lg items-center space-y-7 flex-shrink-0 w-[500px] h-[500px] md:w-[600px] md:h-[600px] xl:w-[900px] snap-center p-10 bg-[#292929] hover:opacity-100 cursor-pointer transition-opacity duration-200 overflow-hidden'
>
// Rest of the child component code
</article>
)
}
export default ExperienceCard
Check out my Tailwind configs and Postcss configs:
// Tailwind Configs
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [
require('tailwind-scrollbar')
],
}
// Postcss Configs
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Lastly, included some global CSS in the project as well. Have encountered issues where applied styling doesn't reflect visually even though it shows up when inspected in the browser. This is happening across browsers like Firefox and Chromium.
Trying to troubleshoot by changing order of class styling, playing with values, but not much luck so far. Visually, it's hit or miss...