<< Slider.
{... setups}
// design= {{arrow: "reminder", marginBottom: "10px"}}
className= {'$ {classes.services __ slider} cursor-pointer mb-10 md: megabytes:0'}
>>.
{youtubeVideos.
?. filter(( video clip) => > video.id.videoId).
?. map(( video clip) => > (.
<< div.
onClick= {() =>>.
window.open(.
' https://youtube.com/watch?v=$ {video.id.videoId} ',.
" _ space".
).
}
design= {{cushioning: "10px"}}
secret= {video.id.videoId}
>>.
<< Picture.
src= {video.snippet.thumbnails.medium.url}
elevation= {0}
size= {0}
dimensions=" 100vw"
design= {{
borderRadius: "20px",.
marginBottom: "10px",.
size: "100%",.
elevation: "vehicle",.
}}
alt= {video.snippet.title}
/>>.
<< p> > {video.snippet.title} <.
<< p className=" p-2.5 bg-[#171f38] w-fit text-xs text-white mt-2 rounded-md">>.
{brand-new Day( video.snippet.publishTime). toDateString()}
<.
<.
))}
<.
solutions __ container {
screen: flex;.
align-items: facility;.
column-gap: 2rem;.
}
. solutions __ slider {
button.slick-arrow {
change: range( 1.5 );.
}
}
@media just display as well as (max-width: 992px) {
. solutions __ container {
flex-direction: column;.
align-items: unset;.
}
. solution __ title h3 {
font-size: 1.3 rapid eye movement;.
}
}
I'm making use of CSS components in addition to Tailwind CSS courses in Slider className. However, if I attempt to make use of Nested CSS in solutions __ slider course, it tosses me this mistake:
Embedded CSS was identified, yet CSS nesting has actually not been set up properly.
Please allow a CSS nesting plugin prior to Tailwind in your setup.
See exactly how below: https://tailwindcss.com/docs/using-with-preprocessors#nesting
As Well As, if I comply with all the actions receives the docs, it creates problems with my reliances as well as does not run the application.
I have actually attempted changing the postcss.config.js with the codeblock listed below as well as mounting the postcss-nesting bundle:
module.exports = {
plugins: {
' postcss-import': {},.
' tailwindcss/nesting': 'postcss-nesting',.
tailwindcss: {},.
autoprefixer: {},.
}
}
npm set up -D postcss-nesting
If anybody have actually encountered this comparable concern of Nested CSS, please aid me repair this! Your assistance is extremely valued!
Many Thanks
