diff --git a/README.md b/README.md index 64c10c7eb8..4aeea8ab1c 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Beautifully designed components built with Radix UI and Tailwind CSS. - [ ] Toggle - [ ] Toggle Group - [ ] Toolbar -- [ ] Navigation Menu +- [ ] Navigation Menu (Vertical and Submenus) - [ ] Figma? ## Get Started diff --git a/apps/www/components/examples/index.tsx b/apps/www/components/examples/index.tsx index 0ee7883937..0029b95add 100644 --- a/apps/www/components/examples/index.tsx +++ b/apps/www/components/examples/index.tsx @@ -3,8 +3,8 @@ import { AlertDialogDemo } from "@/components/examples/alert-dialog/demo" import { AspectRatioDemo } from "@/components/examples/aspect-ratio/demo" import { AvatarDemo } from "@/components/examples/avatar/demo" import { ButtonDemo } from "@/components/examples/button/demo" -import { ButtonGhost } from "@/components/examples/button/ghost" import { ButtonDestructive } from "@/components/examples/button/destructive" +import { ButtonGhost } from "@/components/examples/button/ghost" import { ButtonLink } from "@/components/examples/button/link" import { ButtonLoading } from "@/components/examples/button/loading" import { ButtonOutline } from "@/components/examples/button/outline" @@ -27,6 +27,7 @@ import { InputWithLabel } from "@/components/examples/input/with-label" import { InputWithText } from "@/components/examples/input/with-text" import { LabelDemo } from "@/components/examples/label/demo" import { MenubarDemo } from "@/components/examples/menubar/demo" +import { NavigationMenuDemo } from "@/components/examples/navigation-menu/demo" import { PopoverDemo } from "@/components/examples/popover/demo" import { ProgressDemo } from "@/components/examples/progress/demo" import { RadioGroupDemo } from "@/components/examples/radio-group/demo" @@ -87,6 +88,7 @@ export const examples = { InputWithText, LabelDemo, MenubarDemo, + NavigationMenuDemo, PopoverDemo, ProgressDemo, RadioGroupDemo, diff --git a/apps/www/components/examples/navigation-menu/demo.tsx b/apps/www/components/examples/navigation-menu/demo.tsx new file mode 100644 index 0000000000..cf3df9a437 --- /dev/null +++ b/apps/www/components/examples/navigation-menu/demo.tsx @@ -0,0 +1,145 @@ +"use client" + +import * as React from "react" +import Link from "next/link" + +import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "@/components/ui/navigation-menu" + +const components: { title: string; href: string; description: string }[] = [ + { + title: "Alert Dialog", + href: "/docs/primitives/alert-dialog", + description: + "A modal dialog that interrupts the user with important content and expects a response.", + }, + { + title: "Hover Card", + href: "/docs/primitives/hover-card", + description: + "For sighted users to preview content available behind a link.", + }, + { + title: "Progress", + href: "/docs/primitives/progress", + description: + "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", + }, + { + title: "Scroll-area", + href: "/docs/primitives/scroll-area", + description: "Visually or semantically separates content.", + }, + { + title: "Tabs", + href: "/docs/primitives/tabs", + description: + "A set of layered sections of content—known as tab panels—that are displayed one at a time.", + }, + { + title: "Tooltip", + href: "/docs/primitives/tooltip", + description: + "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", + }, +] + +export function NavigationMenuDemo() { + return ( + + + + Getting started + + + + + + Components + +
    + {components.map((component) => ( + + {component.description} + + ))} +
+ + + + + + Documentation + + + + + + ) +} + +const ListItem = React.forwardRef< + React.ElementRef<"a">, + React.ComponentPropsWithoutRef<"a"> +>(({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +

    + {children} +

    +     +     +
    • + ) +}) +ListItem.displayName = "ListItem" diff --git a/apps/www/components/main-nav.tsx b/apps/www/components/main-nav.tsx index 4f6b4fe9c2..16b10ce26a 100644 --- a/apps/www/components/main-nav.tsx +++ b/apps/www/components/main-nav.tsx @@ -2,111 +2,131 @@ import * as React from "react" import Link from "next/link" -import { useSelectedLayoutSegment } from "next/navigation" -import { MainNavItem } from "types/nav" +import { allDocs } from "contentlayer/generated" -import { docsConfig } from "@/config/docs" import { siteConfig } from "@/config/site" import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" -import { Button } from "@/components/ui/button" import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" -import { ScrollArea } from "@/components/ui/scroll-area" - -interface MainNavProps { - items?: MainNavItem[] - children?: React.ReactNode -} - -export function MainNav({ items, children }: MainNavProps) { - const segment = useSelectedLayoutSegment() + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "@/components/ui/navigation-menu" +import { buttonVariants } from "./ui/button" +import { Separator } from "./ui/separator" +export function MainNav() { return ( -
    - +
    + {siteConfig.name} - {items?.length ? ( - - ) : null} - - - - - - - - {siteConfig.name} - - - - - {items?.map( - (item, index) => - item.href && ( - - {item.title} - - ) - )} - {docsConfig.sidebarNav.map((item, index) => ( - - - {item.title} - - {item?.items?.length && - item.items.map((item) => ( - - {item.href ? ( - {item.title} - ) : ( - item.title - )} - + + + + + Getting started + + +
      +
    • + + +
      + {siteConfig.name} +
      +

      + {siteConfig.description} +

      +       + +
      • + + Re-usable components built using Radix UI and Tailwind CSS. + + + How to install dependencies and structure your app. + + + Styles for headings, paragraphs, lists...etc + +
    +     +     + + + Components + + +
      + {allDocs + .filter((doc) => doc.featured) + .map((doc) => ( + + {doc.description} + ))} - - ))} - - - +
    +
    + + + + Browse components + + +
    +     +     + + + + GitHub + + + +     +
    ) } + +const ListItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, title, children, href, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +

    + {children} +

    +     + +
    • + ) +}) +ListItem.displayName = "ListItem" diff --git a/apps/www/components/mobile-nav.tsx b/apps/www/components/mobile-nav.tsx new file mode 100644 index 0000000000..4f030205e3 --- /dev/null +++ b/apps/www/components/mobile-nav.tsx @@ -0,0 +1,80 @@ +"use client" + +import * as React from "react" +import Link from "next/link" + +import { docsConfig } from "@/config/docs" +import { siteConfig } from "@/config/site" +import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { ScrollArea } from "@/components/ui/scroll-area" + +export function MobileNav() { + return ( + + + + + + + + {siteConfig.name} + + + + + {docsConfig.sidebarNav?.map( + (item, index) => + item.href && ( + + {item.title} + + ) + )} + {docsConfig.sidebarNav.map((item, index) => ( + + + {item.title} + + {item?.items?.length && + item.items.map((item) => ( + + {item.href ? ( + {item.title} + ) : ( + item.title + )} + + ))} + + ))} + + + + ) +} diff --git a/apps/www/components/search.tsx b/apps/www/components/search.tsx index b20c13435b..a6b20170d3 100644 --- a/apps/www/components/search.tsx +++ b/apps/www/components/search.tsx @@ -21,7 +21,7 @@ export function DocsSearch({ className, ...props }: DocsSearchProps) { diff --git a/apps/www/components/site-header.tsx b/apps/www/components/site-header.tsx index 37c8ab1eff..4503e90153 100644 --- a/apps/www/components/site-header.tsx +++ b/apps/www/components/site-header.tsx @@ -4,16 +4,17 @@ import { docsConfig } from "@/config/docs" import { siteConfig } from "@/config/site" import { Icons } from "@/components/icons" import { MainNav } from "@/components/main-nav" +import { MobileNav } from "@/components/mobile-nav" import { ModeToggle } from "@/components/mode-toggle" import { DocsSearch } from "@/components/search" -import { DocsSidebarNav } from "@/components/sidebar-nav" import { buttonVariants } from "@/components/ui/button" export function SiteHeader() { return (
    -
    - +
    + +
    diff --git a/apps/www/components/ui/navigation-menu.tsx b/apps/www/components/ui/navigation-menu.tsx new file mode 100644 index 0000000000..292683985c --- /dev/null +++ b/apps/www/components/ui/navigation-menu.tsx @@ -0,0 +1,128 @@ +import * as React from "react" +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" +import { cva } from "class-variance-authority" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const NavigationMenu = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + +)) +NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName + +const NavigationMenuList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName + +const NavigationMenuItem = NavigationMenuPrimitive.Item + +const navigationMenuTriggerStyle = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:bg-slate-100 disabled:opacity-50 dark:focus:bg-slate-800 disabled:pointer-events-none bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-slate-50 dark:data-[state=open]:bg-slate-800 h-10 py-2 px-4 group" +) + +const NavigationMenuTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children}{" "} + +)) +NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName + +const NavigationMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName + +const NavigationMenuLink = NavigationMenuPrimitive.Link + +const NavigationMenuViewport = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( +
    + +
    +)) +NavigationMenuViewport.displayName = + NavigationMenuPrimitive.Viewport.displayName + +const NavigationMenuIndicator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +
    + +)) +NavigationMenuIndicator.displayName = + NavigationMenuPrimitive.Indicator.displayName + +export { + navigationMenuTriggerStyle, + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, +} diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index ae7d21d05b..1fb92955d5 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -120,6 +120,11 @@ export const docsConfig: DocsConfig = { href: "/docs/primitives/menubar", items: [], }, + { + title: "Navigation Menu", + href: "/docs/primitives/navigation-menu", + items: [], + }, { title: "Popover", href: "/docs/primitives/popover", diff --git a/apps/www/content/docs/primitives/alert-dialog.mdx b/apps/www/content/docs/primitives/alert-dialog.mdx index dd334b7c93..a655072632 100644 --- a/apps/www/content/docs/primitives/alert-dialog.mdx +++ b/apps/www/content/docs/primitives/alert-dialog.mdx @@ -1,6 +1,7 @@ --- title: Alert Dialog description: A modal dialog that interrupts the user with important content and expects a response. +featured: true radix: link: https://www.radix-ui.com/docs/primitives/components/alert-dialog api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference diff --git a/apps/www/content/docs/primitives/button.mdx b/apps/www/content/docs/primitives/button.mdx index 4a7be6a3e7..0f85c6826e 100644 --- a/apps/www/content/docs/primitives/button.mdx +++ b/apps/www/content/docs/primitives/button.mdx @@ -1,6 +1,7 @@ --- title: Button description: Displays a button or a component that looks like a button. +featured: true --- @@ -71,6 +72,7 @@ import { Button } from "@/components/ui/button" --- --- + ### Link diff --git a/apps/www/content/docs/primitives/collapsible.mdx b/apps/www/content/docs/primitives/collapsible.mdx index 4aeffd154f..e932cb158d 100644 --- a/apps/www/content/docs/primitives/collapsible.mdx +++ b/apps/www/content/docs/primitives/collapsible.mdx @@ -1,6 +1,7 @@ --- title: Collapsible description: An interactive component which expands/collapses a panel. +featured: true radix: link: https://www.radix-ui.com/docs/primitives/components/collapsible api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference diff --git a/apps/www/content/docs/primitives/dialog.mdx b/apps/www/content/docs/primitives/dialog.mdx index eac04f461f..aea360bac1 100644 --- a/apps/www/content/docs/primitives/dialog.mdx +++ b/apps/www/content/docs/primitives/dialog.mdx @@ -1,6 +1,7 @@ --- title: Dialog description: A modal dialog that interrupts the user with important content and expects a response. +featured: true radix: link: https://www.radix-ui.com/docs/primitives/components/dialog api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference diff --git a/apps/www/content/docs/primitives/dropdown-menu.mdx b/apps/www/content/docs/primitives/dropdown-menu.mdx index 96cd344bd5..6b58a08c2e 100644 --- a/apps/www/content/docs/primitives/dropdown-menu.mdx +++ b/apps/www/content/docs/primitives/dropdown-menu.mdx @@ -1,6 +1,7 @@ --- title: Dropdown Menu description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. +featured: true radix: link: https://www.radix-ui.com/docs/primitives/components/dropdown-menu api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference diff --git a/apps/www/content/docs/primitives/navigation-menu.mdx b/apps/www/content/docs/primitives/navigation-menu.mdx new file mode 100644 index 0000000000..5c2546e41b --- /dev/null +++ b/apps/www/content/docs/primitives/navigation-menu.mdx @@ -0,0 +1,76 @@ +--- +title: Navigation Menu +description: A collection of links for navigating websites. +radix: + link: https://www.radix-ui.com/docs/primitives/components/navigation-menu + api: https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference +--- + + + + + +## Installation + +1. Install the `@radix-ui/react-navigation-menu` component from radix-ui: + +```bash +npm install @radix-ui/react-navigation-menu +``` + +2. Copy and paste the following code into your project. + + + + + This is the `` primitive. You can place it in a file at + `components/ui/navigation-menu.tsx`. + + +## Usage + +```tsx +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuIndicator, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + NavigationMenuViewport, +} from "@/components/ui/navigation-menu" +``` + +```tsx + + + + Item One + + Link + + + + +``` + +### Link Component + +When using the Next.js `` component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger. + +```tsx +import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu" +``` + +```tsx {3-5} + + + + Documentation + + + +``` + +See also the [Radix UI documentation](https://www.radix-ui.com/docs/primitives/components/navigation-menu#with-client-side-routing) for handling client side routing. diff --git a/apps/www/content/docs/primitives/select.mdx b/apps/www/content/docs/primitives/select.mdx index a3e3d09fca..5edf714f17 100644 --- a/apps/www/content/docs/primitives/select.mdx +++ b/apps/www/content/docs/primitives/select.mdx @@ -1,6 +1,7 @@ --- title: Select description: Displays a list of options for the user to pick from—triggered by a button. +featured: true radix: link: https://www.radix-ui.com/docs/primitives/components/select api: https://www.radix-ui.com/docs/primitives/components/select#api-reference diff --git a/apps/www/contentlayer.config.js b/apps/www/contentlayer.config.js index 4322b1735a..33cf7001a0 100644 --- a/apps/www/contentlayer.config.js +++ b/apps/www/contentlayer.config.js @@ -60,6 +60,11 @@ export const Doc = defineDocumentType(() => ({ type: "nested", of: RadixProperties, }, + featured: { + type: "boolean", + default: false, + required: false, + }, }, computedFields, })) diff --git a/apps/www/package.json b/apps/www/package.json index ae4163af4c..c9a316615b 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -24,6 +24,7 @@ "@radix-ui/react-hover-card": "^1.0.3", "@radix-ui/react-label": "^2.0.0", "@radix-ui/react-menubar": "^1.0.0", + "@radix-ui/react-navigation-menu": "^1.1.1", "@radix-ui/react-popover": "^1.0.2", "@radix-ui/react-progress": "^1.0.1", "@radix-ui/react-radio-group": "^1.1.0", diff --git a/package.json b/package.json index fa8770fc09..8a4962917e 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "dependencies": { "@babel/core": "^7.20.7", "@ianvs/prettier-plugin-sort-imports": "^3.7.1", + "@tailwindcss/line-clamp": "^0.4.2", "eslint": "^8.31.0", "eslint-config-next": "13.0.0", "eslint-config-prettier": "^8.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c89e14c4c..d64b9715f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,7 @@ importers: '@commitlint/cli': ^17.3.0 '@commitlint/config-conventional': ^17.3.0 '@ianvs/prettier-plugin-sort-imports': ^3.7.1 + '@tailwindcss/line-clamp': ^0.4.2 '@types/node': ^18.11.9 '@types/react': 18.0.15 '@types/react-dom': 18.0.6 @@ -29,6 +30,7 @@ importers: dependencies: '@babel/core': 7.20.7 '@ianvs/prettier-plugin-sort-imports': 3.7.1_prettier@2.8.1 + '@tailwindcss/line-clamp': 0.4.2_tailwindcss@3.2.4 eslint: 8.31.0 eslint-config-next: 13.0.0_wogtpudmlxya2leoxia5qf2rl4 eslint-config-prettier: 8.5.0_eslint@8.31.0 @@ -67,6 +69,7 @@ importers: '@radix-ui/react-hover-card': ^1.0.3 '@radix-ui/react-label': ^2.0.0 '@radix-ui/react-menubar': ^1.0.0 + '@radix-ui/react-navigation-menu': ^1.1.1 '@radix-ui/react-popover': ^1.0.2 '@radix-ui/react-progress': ^1.0.1 '@radix-ui/react-radio-group': ^1.1.0 @@ -129,6 +132,7 @@ importers: '@radix-ui/react-hover-card': 1.0.3_ib3m5ricvtkl2cll7qpr2f6lvq '@radix-ui/react-label': 2.0.0_biqbaboplfbrettd7655fr4n2y '@radix-ui/react-menubar': 1.0.0_ib3m5ricvtkl2cll7qpr2f6lvq + '@radix-ui/react-navigation-menu': 1.1.1_biqbaboplfbrettd7655fr4n2y '@radix-ui/react-popover': 1.0.2_ib3m5ricvtkl2cll7qpr2f6lvq '@radix-ui/react-progress': 1.0.1_biqbaboplfbrettd7655fr4n2y '@radix-ui/react-radio-group': 1.1.0_biqbaboplfbrettd7655fr4n2y @@ -2014,6 +2018,31 @@ packages: - '@types/react' dev: false + /@radix-ui/react-navigation-menu/1.1.1_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-Khgf+LwqYfUpbFAHcFPDMj6ZrWxnwCgC96liLYwE48x9YJbXGlutOWzZaSzrgl82xS+PwoPLQunfDe/i4ZITRA==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.6 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-collection': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-direction': 1.0.0_react@18.2.0 + '@radix-ui/react-dismissable-layer': 1.0.2_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-id': 1.0.0_react@18.2.0 + '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0 + '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0 + '@radix-ui/react-use-previous': 1.0.0_react@18.2.0 + '@radix-ui/react-visually-hidden': 1.0.1_biqbaboplfbrettd7655fr4n2y + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-popover/1.0.2_ib3m5ricvtkl2cll7qpr2f6lvq: resolution: {integrity: sha512-4tqZEl9w95R5mlZ/sFdgBnfhCBOEPepLIurBA5kt/qaAhldJ1tNQd0ngr0ET0AHbPotT4mwxMPr7a+MA/wbK0g==} peerDependencies: @@ -2498,6 +2527,14 @@ packages: tslib: 2.4.1 dev: false + /@tailwindcss/line-clamp/0.4.2_tailwindcss@3.2.4: + resolution: {integrity: sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==} + peerDependencies: + tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1' + dependencies: + tailwindcss: 3.2.4_ra2vnoek4vhbzktaezawwqbin4 + dev: false + /@tsconfig/node10/1.0.9: resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==} @@ -6166,6 +6203,7 @@ packages: lilconfig: 2.0.6 postcss: 8.4.20 yaml: 1.10.2 + dev: true /postcss-load-config/3.1.4_ra2vnoek4vhbzktaezawwqbin4: resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} @@ -7068,7 +7106,7 @@ packages: peerDependencies: tailwindcss: '>=3.0.0 || insiders' dependencies: - tailwindcss: 3.2.4_postcss@8.4.20 + tailwindcss: 3.2.4_ra2vnoek4vhbzktaezawwqbin4 dev: false /tailwindcss/3.2.4_postcss@8.4.20: @@ -7103,6 +7141,7 @@ packages: resolve: 1.22.1 transitivePeerDependencies: - ts-node + dev: true /tailwindcss/3.2.4_ra2vnoek4vhbzktaezawwqbin4: resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==} diff --git a/tailwind.config.js b/tailwind.config.js index 1a116ef3f1..41c67e87c2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -32,5 +32,5 @@ module.exports = { }, }, }, - plugins: [require("tailwindcss-animate")], + plugins: [require("tailwindcss-animate"), require("@tailwindcss/line-clamp")], }