Seo – Load colors for tailwind.config.ts from API using Nextjs
I wanted to use React and have SEO, so I chose Next. But I need to load colors that come from the backend to use in tailwind.config.ts, but how can I do this using Next?
Reactjs – tailwindcss not working properly for some strange reason
For some reason my tailwindcss isn't working correctly. Did I forget something? tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: {}, }, plugins: [],…
Css – How to have white gradient on the side with React and Swiper js
I'm using React.js and swiper.js (https://swiperjs.com/) Right now the swiper looks like this (https://codesandbox.io/s/swiper-react-forked-hkjwql?file=/src/index.js) I wanna have white gradient on the side like this exemple. I tried to use CSS but it doesn't work at all (https://codepen.io/studiojvla/pen/qVbQqW) Here's my code…
Reactjs – Colors fetched from json don't work in Tailwind
I'm working on a React project that fetches data from a server and displays it. The colors are kept in the json, so I tried to set them with tailwind: ... const bgcolor = `bg-[${card.color}]` const textcolor = `text-[${card.color}]` return…
Javascript – Show more/Show less form with div's inside in NextJS
So I have a page that describes the amenities in the hotel, how I can create a hidden block of amenities that can be expanded by pressing the "Show more amenities" button and collapsed by pressing "Show less amenities" in…
Reactjs – In my SearchBar component react, the problem is while I'm selecting the list item there is nothing happening onClick function
Problem Description: I'm working on implementing a search bar in my React application. The search bar should show a list of suggestions when users type in the input field. These suggestions should be selectable, and when a user clicks on…
Html – preventing padding-left from pushing other items left
I am trying to place the id "homescore" to the right of the id "hometeam" using padding-left (pl in tailwind). /* eslint-disable react/prop-types */ const Matches = (props) => { return ( <div className='flex items-center justify-center'> <div className='flex flex-col items-center…
How to DRY up Tailwind CSS styles in React/Next.js components?
I've been using Tailwind CSS in my React/Next.js project and have noticed that my code has become less maintainable compared to when I used traditional CSS or styled-components. In the past, I could easily centralize style changes, but now, I…
Reactjs – Tailwindcss and react
trying to use tailwindcss with react I installed tailwind already but yet cant see its effect in my react code. Used tailwind documentations yet no changes created a tailwind.config.js file, did this as well @tailwind base; @tailwind components; @tailwind utilities;
Css – How can I vertically align different height text using flexbox in Tailwind?
I have a problem with vertically aligning text using flex in my web application using Tailwind. Here is part of my code: <div className="flex flex-col gap-4"> <div className="font-bebas bg-font-color "> <h1 className="text-font-color text-4xl flex flex-row gap-2 items-end">nothing but <p className="text-secondary…