We Keep Coding

How should I articulate this route/ link to="/......." in order to get the router-link-active-exact style working in Vue-router?

I was assigned this task, the nav has 4 main paths and every one of them except for "discover" has the exact class active when you on that path.
Discover path has the active indeed but not the "exact":
The why it's pretty simple => the link => to"/discover" goes to the route "/discover" which has a redirect to="discover/leaderboard" so I assume that the exact never matches. I did two things, first I deleted the redirection and add the "discover/leaderboard" to both (route and link) => it breaks and I guess it happens because there's children [leaderboard] in dicoverRoutes.
the n2 thing I tried was => link :to="{name: componentName}" => the redirection was good but then again, the exact class was not working.
Here's the code, it would be really apreciated if can tell me how to articulate correctly to match the exact class.
DiscoverRoutes
import DiscoverView from '#/views/DiscoverView.vue'
import DiscoverLeaderboardView from '#/views/Discover/DiscoverLeaderboardView.vue'
import DiscoverClubsView from '#/views/Discover/DiscoverClubsView.vue'
import DiscoverCoachesView from '#/views/Discover/DiscoverCoachesView.vue'
// Components
import LeaderboardPreview from '#/components/Leaderboard/LeaderboardPreview.vue'
export default [
{
path: '/discover',
redirect: '/discover/leaderboard',
component: DiscoverView,
meta: { requiresAuth: true },
children: [
{
path: 'leaderboard',
name: 'leaderboard',
props: { sidebar: false },
components: {
default: DiscoverLeaderboardView,
sidebar: LeaderboardPreview
}
},
{
path: 'tournaments',
name: 'tournaments',
props: { sidebar: false },
components: {
default: () => import('#/views/Discover/DiscoverTournamentsView.vue'),
sidebar: LeaderboardPreview
}
},
{
path: 'clubs',
name: 'clubs',
props: { sidebar: true },
components: {
default: DiscoverClubsView,
sidebar: LeaderboardPreview
}
},
{
path: 'coaches',
name: 'coaches',
props: { sidebar: true },
components: {
default: DiscoverCoachesView,
sidebar: LeaderboardPreview
}
}
]
}
]
Navbar:
<nav class="w-full bg-white shadow-top z-nav">
<!-- Mobile -->
<ul
class="grid grid-flow-col-dense items-center"
:class="{ 'lg:hidden': !rpSettings.setMobileViewport }"
style="grid-template-columns: 1fr 1fr 4rem 1fr 1fr"
>
<button
class="w-16 h-16 grid place-items-center col-start-3 text-white bg-accent shadow rounded-full transform -translate-y-6"
#click="openGameModal()"
>
<Icon use="plus" class="w-6 h-6" />
</button>
<li
v-for="link in links"
:key="link.route"
class="h-full grid place-items-center relative text-secondary hover:text-pink"
>
<router-link
:to="link.route"
v-slot="{ isExactActive }"
class="w-6 h-6"
>
<span
v-if="isExactActive"
class="w-8 absolute top-0 bg-pink rounded-b-lg transform -translate-x-1 z-40"
style="height: 3px"
/>
<Icon
:use="link.icon"
class="w-6 h-6"
:class="{ 'text-pink indicator': isExactActive }"
/>
</router-link>
</li>
</ul>
<!-- Desktop -->
<div
class="h-20 px-5 hidden items-center shadow-sm xl:px-20"
:class="{ 'lg:flex': !rpSettings.setMobileViewport }"
>
<router-link to="/">
<Logo class="w-20 h-11" />
</router-link>
<div class="ml-16 mr-5">
<router-link
to="/"
v-slot="{ isExactActive }"
class="capitalize border-pink hover:text-pink"
:class="
isExactActive
? 'text-primary font-bold border-3'
: 'text-tertiary font-normal border-none'
"
>
{{ t('home') }}
</router-link>
<router-link
to="/discover"
v-slot="{ isExactActive }"
class="ml-8 capitalize border-pink hover:text-pink"
:class="
isExactActive
? 'text-primary font-bold border-3'
: 'text-tertiary font-normal border-none'
"
>
{{ t('discover') }}
</router-link>
</div>
<GlobalSearch class="mx-4 flex-grow" />
<div class="flex gap-3">
<Button
secondary
class="h-10 gap-x-2 capitalize"
#click="openGameModal()"
>
<Icon
use="plus"
class="w-6 h-6 p-1 bg-red text-white rounded-full hover:bg-purple"
/>
<span class="transform translate-y-0.5">{{ t('new') }}</span>
</Button>
<Icon
ref="notificationButton"
id="notificationButton"
button
use="notifications"
class="w-10 h-10 p-2.5 text-secondary bg-white rounded-lg hover:text-pink hover:shadow"
#click="toggleNotificationModal()"
/>
<Modal
hideBackdrop
#default="{ hide }"
class="max-w-lg max-h-112 w-2/5 h-full pb-10 overflow-hidden"
:style="modalPosition"
v-model:show="showNotifications"
>
<header class="pt-3 pb-2 px-5 self-start">
<router-link
to="/notifications"
class="text-primary font-semibold capitalize"
#click="hide()"
>
{{ t('notification.title') }}
</router-link>
</header>
<NotificationList #navigate="hide()" />
</Modal>
<router-link
to="/profile"
class="h-10 p-2 flex items-center gap-x-3 text-secondary bg-white rounded-lg hover:text-pink hover:shadow"
>
<img
v-if="photo"
v-lazy="{ src: imgURL }"
:alt="fullName"
class="w-full h-full object-contain rounded-md"
/>
<Icon v-else use="profile" class="w-6 h-6" />
<span class="text-sm whitespace-nowrap">
{{ fullName }}
</span>
</router-link>
</div>
</div>
</nav>

tailwind style not applying in next js when using official cli to generate project

I am following the tailwind doc to generate nextJs app.
npx create-next-app -e with-tailwindcss .
Then I've created NavBar component by copying the code of tailwind doc
NavBar.js
import React from "react";
function NavBar() {
return (
<nav className="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div className="flex items-center flex-shrink-0 text-white mr-6">
<svg
className="fill-current h-8 w-8 mr-2"
width="54"
height="54"
viewBox="0 0 54 54"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
</svg>
<span className="font-semibold text-xl tracking-tight">Tailwind CSS</span>
</div>
<div className="block lg:hidden">
<button className="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg
className="fill-current h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div className="text-sm lg:flex-grow">
<a
href="#responsive-header"
className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"
>
Docs
</a>
<a
href="#responsive-header"
className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"
>
Examples
</a>
<a
href="#responsive-header"
className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white"
>
Blog
</a>
</div>
<div>
<a
href="#"
className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0"
>
Download
</a>
</div>
</div>
</nav>
);
}
export default NavBar;
The appearance of NavBar is not same as the doc
This is what the NavBar should look like:
tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
postcss.config.js
// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
_app.js
import Layout from "../components/Layout";
import "tailwindcss/tailwind.css";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
Layout.js
import React from 'react';
import NavBar from '../components/NavBar';
function Layout({children}) {
return (
<>
<NavBar/>
<div>
<main>
{children}
</main>
</div>
</>
)
}
export default Layout

The problem is caused by the teal not being associated with a color so adding theme: { colors: require('tailwindcss/colors') } to tailwind.config.js fixes it.
module.exports = {
theme: {
colors: require('tailwindcss/colors'),
},
}

Fill page with body and stick footer to bottom with flex (Tailwindcss, Nextjs)

I am trying to use flex-grow to make the body section fill the screen and have the nav stick to the bottom, but I can't figure out which elements to apply them to. Can anyone point me to which element it should be on?
I tried making the div above the nav in _app.js flex with flex-col then applied flex-grow to the body section of categories/[slug].js, but no luck.
import Head from "next/head";
import Link from "next/link";
import Skeleton from "react-loading-skeleton";
import { CURSORY_ARTICLES_BY_CATEGORY_QUERY } from "../../queries/articles";
import { useRouter } from 'next/router';
import { useQuery } from "#apollo/react-hooks";
const Main = () => {
const router = useRouter()
const { slug } = router.query;
const { data, loading, error } = useQuery(CURSORY_ARTICLES_BY_CATEGORY_QUERY, {
variables: { category: slug }
});
return (
<div>
<Head>
<link
rel="preload"
href='../public/fonts/Apple.ttf'
as="font"
crossOrigin=""
/>
</Head>
<div className="max-w-full flex container bg-gray-terminal bg-image justify-around">
<ul className="flex flex-col font-apple">
{
loading ? <Skeleton count={6} width={512} height={256}></Skeleton> :
error ? <p>Error: {JSON.stringify(error)}</p> :
data.articles.map(
(article) => {
return (
<Link href={`/articles/${article.slug}`}>
<li key={article.slug} className="rounded gird grid-cols-4 justify-between cursor-pointer my-8 mx-2 md:mx-4 lg:mx-8 text-green-terminal hover:text-white border-4 border-green-terminal hover:border-white shadow-2xl bg-gray-terminal">
<h1 className="mx-4 py-4 sm:py-2 w-1/3 col-span-1 font-apple">{article.title}</h1>
<p className="mx-4 text-sm py-4 sm:py-2 w-2/3 col-span-3 font-apple">{article.description}</p>
</li>
</Link>
);
}
)
}
</ul>
</div>
</div>
);
}
export default function SelectedCategory() {
return (
<Main />
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import { ApolloProvider } from "#apollo/react-hooks";
import client from "../lib/apollo";
import Nav from "../components/nav";
import Footer from "../components/footer";
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<ApolloProvider client={client}>
<div className="flex flex-col">
<Nav />
<Component {...pageProps} />
<Footer />
</div>
</ApolloProvider>
);
}
export default MyApp
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Link from 'next/link';
export default function Footer() {
return (
<footer className="max-w-full container flex flex-col items-center bg-black font-apple">
<Link href="https://twitter.com/Unenunciate">
<svg className="my-4 cursor-pointer text-green-terminal fill-current hover:text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
</Link>
<Link href="/contact">
<div className="tracking-wider text-md mb-4 text-green-terminal hover:text-white border-green-terminal hover:border-white hover:shadow-lg">
Contact
</div>
</Link>
<div className="text-green-terminal text-sm mb-2">
Copyright Ⓒ 2021
</div>
</footer>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import CATEGORIES_QUERY from "../queries/categories";
import Link from 'next/link';
import Skeleton from "react-loading-skeleton";
import { useQuery } from "#apollo/react-hooks";
export default function Nav() {
const { data, loading, error } = useQuery(CATEGORIES_QUERY, {
variables: { slug: "categories" }
});
return (
<div className="bg-black max-w sticky">
<div>
<nav className="flex justify-between container mx-auto py-4">
<ul>
<li className="group flex flex-row mx-2 text-green-terminal group-hover:text-white border-b-4 border-radius border-green-terminal hover:border-white hover:shadow-lg">
<Link href="/">
<div className="flex flex-row cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" className="group-hover:text-white text-green-terminal fill-current h-5 w-5 -translate-y-2 icon " viewBox="0 0 20 20" fill="#fff">
<path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
</svg>
<span className="group-hover:text-white font-apple tracking-widest">
Uenunciate
</span>
</div>
</Link>
</li>
</ul>
<ul>
</ul>
<div className="flex justify-between">
<ul className="flex flex-wrap mx-2 md:mx-4 lg:mx-8">
{
loading ? <Skeleton count={2} width={12} height={12}></Skeleton>:
error ? <p>Error: {JSON.stringify(error)}</p> :
data.categories.map(
(category) => {
return (
<li key={category.slug} className="mx-2 md:mx-4 lg:mx-8 font-apple tracking-widest text-green-terminal hover:text-white border-b-4 border-green-terminal hover:border-white hover:shadow-lg ">
<Link href={`/categories/${category.slug}`}>
{category.name}
</Link>
</li>
);
}
)
}
</ul>
</div>
</nav>
</div>
</div>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

You might be able to only apply align-items: stretch; (tw class: items-stretch) on the main content element.
However, you might need to go a bit deeper and style your body, :root (html) and #__next elements. Here is a general SASS with Next tailwind version.
:root,
body,
#__next {
#apply flex flex-col flex-1;
#apply h-auto min-h-full w-screen max-w-full;
#apply m-0 p-0;
#apply overflow-y-auto overflow-x-hidden;
}
Here is a codesandbox example - it's not using tailwind classes because I couldn't get it to work with next 10 in codesandbox. It's using vanilla CSS but you can get the idea.
Just some advice:
Set your svg fill to "currentColor", it will allow you to easily color them with text color classes.
Your next/links need to be wrapped in an "a" per the docs if you are adding anything other than text or adding additonal props.
Exenal links should't use next/link and they should use rel="nofollow noreferrer" to enhance security for your users.
The example also includes the above advice.

Run or execute script after page is loaded with react helmet, react gatsbyjs

i have a blog post page that load content via graphql, in the content are scripts tag of charts.
the problem is that when using it does not load the scripts. Only load the scripts if you refresh the browser.
So i added the scripts to helmet after data loaded but they dont run/load .
Is there a way to "refresh" the dom?
import React, { useEffect,useState, Suspense } from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import EmbedContainer from "react-oembed-container"
import SEO from "../components/seo"
import { Helmet } from "react-helmet"
const PostContentComponent = React.lazy(() => import('../components/PostContentComponent'));
const BlogPost = ({ data }) => {
const [scripts,setScripts] = useState([])
function getScripts () {
// get all script tags from content
const re = /<script\b[^>]*>[\s\S]*?<\/script\b[^>]*>/g
const results = setScripts(data.strapiPost.content.match(re))
return results
}
console.log('scripts', scripts)
useEffect(() => {
getScripts()
// window.instgrm.Embeds.process()
// window.twttr.widgets.load()
}, [data])
return (
<>
<Layout>
<Helmet>
{scripts ? scripts.map((script)=> {
return script
}): null}
</Helmet>
<SEO title={data.strapiPost.title}/>
<section className="posts-container mx-auto all-blog-content my-5 sm:my-20 px-5">
<h3 className="text-1xl sm:text-3xl font-black mb-3">
{data.strapiPost.title}
</h3>
<div className="autor flex flex-wrap items-start">
<div className="autores flex ">
<div className="autorInfo flex items-start">
<h2 className="text-sm tracking-tighter text-gray-900">
By{" "}
{data.strapiPost.users_permissions_users.length === 1 ? (
<>
<Link className="hover:text-black transition duration-300 ease-in-out text-xs mr-1">
{data.strapiPost.users_permissions_users[0].username}
</Link>{" "}
</>
) : data.strapiPost.users_permissions_users.length === 2 ? (
data.strapiPost.users_permissions_users.map((x, index) => (
<>
<Link
className="hover:text-black transition duration-300 ease-in-out text-xs mr-1"
>
{x.name} {x.lastname}{" "}
{index <
data.strapiPost.users_permissions_users.length - 1
? " &"
: ""}
</Link>
</>
))
) : null}
</h2>
</div>
</div>
{/* LOAD CATEGORIES */}
<div className="md:ml-5">
<ul className="flex flex-nowrap relative ">
{data.strapiPost.categories.map(cat => {
return (
<Link
key={cat.name}
className={`bg-gray-200 py-1 px-2 mr-1 rounded-lg text-black text-xs flex-grow `}
>
{cat.name}
</Link>
)
})}
</ul>
</div>
</div>
<span className="text-gray-600 mr-3 text-xs">
Updated at {new Date(data.strapiPost.updated_at).toDateString()}
</span>
<div className="posts-content py-10">
<Img
alt={data.strapiPost.title}
key={data.strapiPost.featured_image.childImageSharp.fluid.src}
imgStyle={{ objectFit: "contain" }}
fluid={data.strapiPost.featured_image.childImageSharp.fluid}
className="mb-10"
/>
<EmbedContainer markup={data.strapiPost.content}>
<div
dangerouslySetInnerHTML={{ __html: unescape(data.strapiPost.content) }}
/>
</EmbedContainer>
</div>
{/* end of all posts */}
{/* AUTHOR CARD */}
<h3 className="text-2xl font-black text-center my-10">
Read More posts by this Author{" "}
</h3>
</section>
<section className="posts-container mx-auto">
<div
className={`grid grid-cols-1 sm:grid-cols-${data.strapiPost.users_permissions_users.length} md:grid-cols-${data.strapiPost.users_permissions_users.length} xl:grid-cols-${data.strapiPost.users_permissions_users.length} gap-4 my-5`}
>
{data.strapiPost.users_permissions_users.map((user, index) => {
return (
<div
key={index}
className="bg-purple-50 flex flex-col items-center justify-center bg-white p-4 shadow rounded-lg"
>
<div className="inline-flex shadow-lg border border-gray-200 rounded-full overflow-hidden h-40 w-40">
{/* <img
src="https://platformable.com/content/images/2020/03/headshot-profile.png"
alt=""
className="h-full w-full my-0"
/> */}
<Img
alt={data.strapiPost.title}
key={index}
fluid={user.image.childImageSharp.fluid}
className="h-full w-full my-0"
/>
</div>
<h2 className="mt-4 font-bold text-xl">
{user.name} {user.lastname}
</h2>
<h6 className="mt-2 text-sm font-medium">{user.position}</h6>
<p className="text-xs text-gray-500 text-center mt-3">
{user.bio}
</p>
</div>
)
})}
</div>
</section>
</Layout>
</>
)
}
export default BlogPost
export const query = graphql`
query MyPost($slug: String!) {
strapiPost(slug: { eq: $slug }) {
categories {
name
}
content
id
title
users_permissions_users {
id
name
lastname
username
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
position
}
updated_at
featured_image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
`

Have you tried something like this:
<Helmet>
{scripts && scripts.map((script)=> <script>{script}</script>)}
</Helmet>
Based on: https://github.com/gatsbyjs/gatsby/issues/6299#issuecomment-402793089
Alternatively, you can use the custom hook approach (useScript).

Set max-content on `ListBox` from `#headlessui/react` to take max width of option while using Tailwind CSS?

I have a sidebar containing 2 select elements & 1 input box in between both of them that looks like:
The biggest option on the 1st select element is 0.75x & on the 2nd select element is WEBP.
constants.ts
export const pixelRatios = [
{
id: "1",
label: "0.5x",
value: "0.5",
},
{
id: "2",
label: "0.75x",
value: "0.75",
},
{
id: "3",
label: "1x",
value: "1",
},
{
id: "4",
label: "1.5x",
value: "1.5",
},
{
id: "5",
label: "2x",
value: "2",
},
{
id: "6",
label: "3x",
value: "3",
},
{
id: "7",
label: "4x",
value: "4",
},
]
export const extensions = [
{
id: "1",
label: "PNG",
value: "png",
},
{
id: "2",
label: "JPEG",
value: "jpeg",
},
{
id: "3",
label: "WEBP",
value: "webp",
},
]
Select.tsx
import * as React from "react"
import { Listbox, Transition } from "#headlessui/react"
import clsx from "clsx"
interface Option {
id: string
value: string
label: string
}
interface IProps {
className?: string
label?: string
selectedOption: Option
onChange: (selectedOption: Option) => void
options: Array<Option>
}
const Selector = () => (
<svg
className="w-5 h-5 text-indigo-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
)
export const Select = ({
className,
label,
options,
selectedOption,
onChange,
}: IProps) => {
return (
<Listbox
as="div"
className={className}
value={selectedOption}
onChange={(selectedOption: Option) => {
onChange(selectedOption)
}}
>
{({ open }) => (
<>
{label && (
<Listbox.Label className="mb-1 text-sm font-medium text-blue-gray-500">
{label}
</Listbox.Label>
)}
<div className="relative mt-1">
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block ml-1">{selectedOption.label}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none">
<Selector />
</span>
</Listbox.Button>
<div className="absolute bottom-0 z-10 w-full mt-1 bg-white rounded-md shadow-lg mb-11">
{/* bottom-0 will open the select menu up & mb-11 will put the dropup above the select option */}
<Transition
show={open}
leave="transition duration-100 ease-in"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Listbox.Options
static
className="py-1 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
>
{options.map((option) => {
return (
<Listbox.Option
as={React.Fragment}
key={option.id}
value={option}
>
{({ active, selected }) => {
return (
<li
className={clsx(
"relative py-2 pl-3 cursor-default select-none pr-9 text-sm",
{
"text-white bg-indigo-600": active,
"text-gray-900": !active,
},
)}
>
<div className="flex items-center">
<span
className={clsx("ml-3 block", {
"font-semibold": selected,
"font-normal": !selected,
})}
>
{option.label}
</span>
</div>
</li>
)
}}
</Listbox.Option>
)
})}
</Listbox.Options>
</Transition>
</div>
</div>
</>
)}
</Listbox>
)
}
App.tsx
import * as React from "react"
import { Select } from "./Select"
import { pixelRatios, extensions } from "./constants"
export type Extension = "jpeg" | "png" | "webp"
export type PixelRatio = 0.5 | 0.75 | 1 | 1.5 | 2 | 3 | 4
export default function App() {
const [pixelRatio, setPixelRatio] = React.useState(pixelRatios[0])
const [extension, setExtension] = React.useState(extensions[0])
const [suffix, setSuffix] = React.useState("")
return (
<div className="w-full">
<h1 className="text-4xl text-center">Select (Max Content)</h1>
<div
id="sidebar"
className="fixed top-0 right-0 h-full px-3 py-4 overflow-y-auto shadow-md bg-pink-100"
style={{
minWidth: "300px",
}}
>
<div className="absolute bottom-10">
<label className="mt-1 text-sm font-medium text-blue-gray-500">
Export
</label>
<div className="flex items-center justify-between w-full space-x-2">
<Select
className="flex-1"
options={pixelRatios}
selectedOption={pixelRatio}
onChange={(selectedOption) => {
setPixelRatio(selectedOption)
}}
/>
<input
type="text"
name="suffix"
className="relative flex-1 w-16 px-2 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Suffix"
value={suffix}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const suffix = e.target.value as string
setSuffix(suffix)
}}
/>
<Select
className="flex-1"
options={extensions}
selectedOption={extension}
onChange={(selectedOption) => {
setExtension(selectedOption)
}}
/>
</div>
</div>
</div>
</div>
)
}
When I select the biggest option from either of the sidebar, it moves the sidebar a bit. It also expands the select element a bit.
Check it out live on Codesandbox → https://codesandbox.io/s/react-tailwind-select-max-content-sidebar-vv58m?file=/src/App.tsx
How do I make the select element take the width of the max content? And how do I stop the sidebar & select element from expanding?

Add flex: 1 only to the item you want to fill all available space.
your export stuff (or footer) inside sidebar is using position: absolute and because of padding you need to specify width of footer like this:
width: calc(100% - 2 * padding)
by this changes, i reached to this codesandbox.