learning
/
tailwind-ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
drew/test-it
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'drew/test-it'
${ noResults }
tailwind-ai/GEMINI.md

26 KiB
Raw Permalink Blame History

Gemini CLI Configuration for Project Components

This document provides context and instructions for the Gemini CLI when working with this project.

Project Context

This project utilizes a components/ directory at its root, which contains a collection of Tailwind CSS-based HTML partials. These components are organized hierarchically by their intended purpose (e.g., application_ui, marketing).

The files within the components/ directory are intended as a library of examples and building blocks. They should never be directly modified or edited by the Gemini CLI.

Component Utilization Strategy

When generating or modifying HTML, the Gemini CLI should refer to the examples provided in the components/ directory to understand patterns, styles, and structures for various UI elements.

For any request involving a UI element that closely resembles a component in components/, the CLI should:

  1. Identify relevant component(s): Search the components/ directory for the most appropriate and similar HTML partials.
  2. Adapt and integrate: Extract the necessary HTML and Tailwind classes from the identified component(s) and adapt them to fit the specific requirements of the user's request. This involves:
    • Copying and pasting relevant HTML structures.
    • Applying or adjusting Tailwind classes as needed.
    • Modifying content (text, images, links) to match the request.
    • Combining elements from multiple components if necessary to fulfill a complex request.
  3. Generate new code: The adapted code should be generated in the target file specified by the user's request, not within the components/ directory.

Component Directory Structure

The following is an overview of the components/ directory structure for reference:

components/
├── application_ui
│   ├── application_shells
│   │   ├── multi_column_layouts
│   │   │   ├── constrained_three_column.html
│   │   │   ├── constrained_with_sticky_columns.html
│   │   │   ├── full_width_secondary_column_on_right.html
│   │   │   ├── full_width_three_column.html
│   │   │   ├── full_width_with_narrow_sidebar_and_header.html
│   │   │   └── full_width_with_narrow_sidebar.html
│   │   ├── sidebar_layouts
│   │   │   ├── brand_sidebar.html
│   │   │   ├── brand_sidebar_with_headers.html
│   │   │   ├── dark_sidebar.html
│   │   │   ├── dark_sidebar_with_header.html
│   │   │   ├── light_sidebar.html
│   │   │   ├── light_sidebar_with_constrained_content_area.html
│   │   │   ├── light_sidebar_with_header.html
│   │   │   └── light_sidebar_with_off_white_background.html
│   │   └── stacked_layouts
│   │       ├── branded_nav_with_compact_page_header.html
│   │       ├── branded_nav_with_white_page_header.html
│   │       ├── brand_nav_with_overlap.html
│   │       ├── dark_nav_with_compact_white_page_header.html
│   │       ├── dark_nav_with_overlap.html
│   │       ├── dark_nav_with_white_page_header.html
│   │       ├── light_nav_on_gray_background.html
│   │       ├── light_nav_with_bottom_border.html
│   │       └── two_row_navigation_with_overlap.html
│   ├── data_display
│   │   ├── calendars
│   │   │   ├── borderless_side_by_side.html
│   │   │   ├── bordlerless_stacked.html
│   │   │   ├── day_view.html
│   │   │   ├── double.html
│   │   │   ├── month_view.html
│   │   │   ├── small_with_meetings.html
│   │   │   ├── week_view.html
│   │   │   └── year_view.html
│   │   ├── description_lists
│   │   │   ├── left_aligned.html
│   │   │   ├── left_aligned_in_card.html
│   │   │   ├── left_aligned_on_dark.html
│   │   │   ├── left_aligned_striped.html
│   │   │   ├── left_aligned_with_inline_actions.html
│   │   │   ├── narrow_with_hidden_labels.html
│   │   │   └── two_column.html
│   │   └── stats
│   │       ├── simple.html
│   │       ├── simple_in_cards.html
│   │       ├── with_brand_icon.html
│   │       ├── with_shared_borders.html
│   │       └── with_trending.html
│   ├── elements
│   │   ├── avatars
│   │   │   ├── avatar_group_stacked_botton_to_top.html
│   │   │   ├── avatar_group_stacked_top_to_bottom.html
│   │   │   ├── circular_avatars.html
│   │   │   ├── circular_avatars_with_bottom_notification.html
│   │   │   ├── circular_avatars_with_placeholder_icon.html
│   │   │   ├── circular_avatars_with_placeholder_initials.html
│   │   │   ├── circular_avatars_with_top_notification.html
│   │   │   ├── rounded_avatars.html
│   │   │   ├── rounded_avatars_with_bottom_notification.html
│   │   │   ├── rounded_avatars_with_top_notification.html
│   │   │   └── with_text.html
│   │   ├── badges
│   │   │   ├── flat.html
│   │   │   ├── flat_pill.html
│   │   │   ├── flat_pill_with_dot.html
│   │   │   ├── flat_with_dot.html
│   │   │   ├── flat_with_remove_button.html
│   │   │   ├── pill_with_border_and_dot.html
│   │   │   ├── pill_with_border.html
│   │   │   ├── small_flat.html
│   │   │   ├── small_flat_pill.html
│   │   │   ├── small_flat_pill_with_dot.html
│   │   │   ├── small_flat_with_dot.html
│   │   │   ├── small_pill_with_border.html
│   │   │   ├── small_with_border.html
│   │   │   ├── with_border_and_dot.html
│   │   │   ├── with_border_and_dot_on_dark.html
│   │   │   ├── with_border_and_remove_button.html
│   │   │   ├── with_border.html
│   │   │   └── with_border_on_dark.html
│   │   ├── button_groups
│   │   │   ├── basic.html
│   │   │   ├── icon_only.html
│   │   │   ├── with_checkbox_and_dropdown.html
│   │   │   ├── with_dropdown.html
│   │   │   └── with_stat.html
│   │   ├── buttons
│   │   │   ├── buttons_with_leading_icon.html
│   │   │   ├── buttons_with_trailing_icon.html
│   │   │   ├── circular_buttons.html
│   │   │   ├── primary_buttons.html
│   │   │   ├── primary_buttons_on_dark.html
│   │   │   ├── rounded_primary_buttons.html
│   │   │   ├── rounded_secondary_buttons.html
│   │   │   ├── secondary_buttons.html
│   │   │   ├── secondary_buttons_on_dark.html
│   │   │   └── soft_buttons.html
│   │   └── dropdowns
│   │       ├── simple.html
│   │       ├── with_dividers.html
│   │       ├── with_icons.html
│   │       ├── with_minimal_menu_icon.html
│   │       └── with_simple_header.html
│   ├── feedback
│   │   ├── alerts
│   │   │   ├── with_accent_border.html
│   │   │   ├── with_actions.html
│   │   │   ├── with_description.html
│   │   │   ├── with_dismiss_button.html
│   │   │   ├── with_link_on_right.html
│   │   │   └── with_list.html
│   │   └── empty_states
│   │       ├── simple.html
│   │       ├── with_dashed_border.html
│   │       ├── with_recommendation_grids.html
│   │       ├── with_recommendations.html
│   │       ├── with_starting_points.html
│   │       └── with_templates.html
│   ├── forms
│   │   ├── action_panels
│   │   │   ├── simple.html
│   │   │   ├── simple_well.html
│   │   │   ├── with_button_at_top_right.html
│   │   │   ├── with_button_on_right.html
│   │   │   ├── with_input.html
│   │   │   ├── with_link.html
│   │   │   ├── with_toggle.html
│   │   │   └── with_well.html
│   │   ├── checkboxes
│   │   │   ├── list_with_checkbox_on_right.html
│   │   │   ├── list_with_description.html
│   │   │   ├── list_with_inline_description.html
│   │   │   └── simple_list_with_heading.html
│   │   ├── comboboxes
│   │   │   ├── simple.html
│   │   │   ├── with_image.html
│   │   │   ├── with_secondary_text.html
│   │   │   └── with_status_indicator.html
│   │   ├── form_layouts
│   │   │   ├── labels_on_left.html
│   │   │   ├── stacked.html
│   │   │   ├── stacked_on_dark.html
│   │   │   ├── two_column.html
│   │   │   └── two_column_with_cards.html
│   │   ├── input_groups
│   │   │   ├── inpout_with_disabled_state.html
│   │   │   ├── inputs_with_inset_labels_and_shared_borders.html
│   │   │   ├── inputs_with_shared_borders.html
│   │   │   ├── input_with_addon.html
│   │   │   ├── input_with_corner_hint.html
│   │   │   ├── input_with_gray_background_and_bottom_border.html
│   │   │   ├── input_with_hidden_label.html
│   │   │   ├── input_with_inline_addon.html
│   │   │   ├── input_with_inline_leading_addon_and_trailing_dropdown.html
│   │   │   ├── input_with_inline_leading_and_trailing_addons.html
│   │   │   ├── input_with_inline_leading_dropdown.html
│   │   │   ├── input_with_inset_label.html
│   │   │   ├── input_with_keyboard_shortcut.html
│   │   │   ├── input_with_label_and_help_text.html
│   │   │   ├── input_with_label.html
│   │   │   ├── input_with_leading_icon_and_trailing_button.html
│   │   │   ├── input_with_leading_icon.html
│   │   │   ├── input_with_overlapping_label.html
│   │   │   ├── input_with_pill_shape.html
│   │   │   ├── input_with_trailing_icon.html
│   │   │   └── input_with_validation_error.html
│   │   ├── radio_groups
│   │   │   ├── cards.html
│   │   │   ├── color_picker.html
│   │   │   ├── list_with_description.html
│   │   │   ├── list_with_descriptions_in_panel.html
│   │   │   ├── list_with_inline_description.html
│   │   │   ├── list_with_radio_on_right.html
│   │   │   ├── simple_inline_list.html
│   │   │   ├── simple_list.html
│   │   │   ├── simple_list_with_radio_on_right.html
│   │   │   ├── simple_table.html
│   │   │   ├── small_cards.html
│   │   │   └── stacked_cards.html
│   │   ├── select_menus
│   │   │   ├── branded_with_supported_text.html
│   │   │   ├── custom_with_avatar.html
│   │   │   ├── custom_with_check_on_left.html
│   │   │   ├── custom_with_status_indicator.html
│   │   │   ├── simple_custom.html
│   │   │   ├── simple_native.html
│   │   │   └── with_secondary_text.html
│   │   ├── signin_and_registration
│   │   │   ├── simple_card.html
│   │   │   ├── simple.html
│   │   │   ├── simple_no_labels.html
│   │   │   ├── simple_on_dark.html
│   │   │   └── split_screen.html
│   │   ├── textareas
│   │   │   ├── simple.html
│   │   │   ├── with_avatar_and_actions.html
│   │   │   ├── with_preview_button.html
│   │   │   ├── with_title_and_pill_actions.html
│   │   │   └── with_underline_and_actions.html
│   │   └── toggles
│   │       ├── short_toggle.html
│   │       ├── simple_toggle.html
│   │       ├── toggle_with_icon.html
│   │       ├── with_left_label_and_description.html
│   │       └── with_right_label.html
│   ├── headings
│   │   ├── card_headings
│   │   │   ├── simple.html
│   │   │   ├── with_action.html
│   │   │   ├── with_avatar_and_actions.html
│   │   │   ├── with_avatar_meta_and_dropdown.html
│   │   │   ├── with_description_and_action.html
│   │   │   └── with_description.html
│   │   ├── page_headings
│   │   │   ├── card_with_avatar_and_stats.html
│   │   │   ├── with_actions_and_breadcrumbs.html
│   │   │   ├── with_actions_and_breadcrumbs_on_dark.html
│   │   │   ├── with_actions.html
│   │   │   ├── with_actions_on_dark.html
│   │   │   ├── with_avatar_and_actions.html
│   │   │   ├── with_banner_image.html
│   │   │   ├── with_filters_and_action.html
│   │   │   ├── with_logo_meta_and_actions.html
│   │   │   ├── with_meta_actions_and_breadcrumbs.html
│   │   │   ├── with_meta_actions_and_breadcrumbs_on_dark.html
│   │   │   ├── with_meta_and_actions.html
│   │   │   └── with_meta_and_actions_on_dark.html
│   │   └── section_headings
│   ├── layout
│   │   ├── cards
│   │   │   ├── basic_card.html
│   │   │   ├── card_edge_to_edge_on_mobile.html
│   │   │   ├── card_with_footer.html
│   │   │   ├── card_with_gray_body.html
│   │   │   ├── card_with_gray_footer.html
│   │   │   ├── card_with_header.html
│   │   │   ├── card_with_heeader_and_footer.html
│   │   │   ├── well_edge_to_edge_on_mobile.html
│   │   │   ├── well.html
│   │   │   └── well_on_gray.html
│   │   ├── containers
│   │   │   ├── constrained_to_br_with_padded_content.html
│   │   │   ├── constrained_with_padded_content.html
│   │   │   ├── full_mobil_constrained_to_br_with_padded_content.html
│   │   │   ├── full_mobile_constrained_with_padded_content_above.html
│   │   │   └── narrow_constrained_with_padded_content.html
│   │   ├── dividers
│   │   │   ├── with_button.html
│   │   │   ├── with_icon.html
│   │   │   ├── with_label.html
│   │   │   ├── with_label_on_left.html
│   │   │   ├── with_title_and_button.html
│   │   │   ├── with_title.html
│   │   │   ├── with_title_on_left.html
│   │   │   └── with_toolbar.html
│   │   ├── list_containers
│   │   │   ├── card_with_dividers_full_width_on_mobile.html
│   │   │   ├── card_with_dividers.html
│   │   │   ├── flat_card_with_dividers.html
│   │   │   ├── separate_cards_full_width_on_mobile.html
│   │   │   ├── separate_cards.html
│   │   │   ├── simple_with_dividers_full_width_on_mobile.html
│   │   │   └── simple_with_dividers.html
│   │   └── media_objects
│   │       ├── aligned_to_bottom.html
│   │       ├── aligned_to_center.html
│   │       ├── basic.html
│   │       ├── basic_responsive.html
│   │       ├── media_on_right.html
│   │       ├── nested.html
│   │       ├── stretched_to_fit.html
│   │       └── wide_responsive.html
│   ├── lists
│   │   ├── feeds
│   │   │   ├── simple_with_icons.html
│   │   │   ├── with_comments.html
│   │   │   └── with_multiple_items_types.html
│   │   ├── grid_lists
│   │   │   ├── actions_with_shared_borders.html
│   │   │   ├── contact_cards.html
│   │   │   ├── contact_cards_with_small_portraits.html
│   │   │   ├── horizontal_link_cards.html
│   │   │   ├── images_with_details.html
│   │   │   ├── logo_cards_with_description_list.html
│   │   │   └── simple_cards.html
│   │   ├── stacked_lists
│   │   │   ├── full_width_with_constrained_content.html
│   │   │   ├── full_width_with_links.html
│   │   │   ├── in_card_with_links.html
│   │   │   ├── narrow.html
│   │   │   ├── narrow_with_actions.html
│   │   │   ├── narrow_with_badges_on_dark.html
│   │   │   ├── narrow_with_small_avatars.html
│   │   │   ├── narrow_with_small_avatars_on_dark.html
│   │   │   ├── narrow_with_sticky_headings.html
│   │   │   ├── narrow_with_truncated_content.html
│   │   │   ├── simple.html
│   │   │   ├── simple_on_dark.html
│   │   │   ├── two_columns_with_links.html
│   │   │   ├── with_badges_buttons_and_action_menu.html
│   │   │   ├── with_inline_links_and_actions_menu.html
│   │   │   ├── with_inline_links_and_avatar_group.html
│   │   │   └── with_links.html
│   │   └── tables
│   │       ├── full_width.html
│   │       ├── full_width_with_avatars_on_dark.html
│   │       ├── full_width_with_constrained_content.html
│   │       ├── simple.html
│   │       ├── simple_in_card.html
│   │       ├── simple_on_dark.html
│   │       ├── with_avatars_and_multi_line_content.html
│   │       ├── with_border.html
│   │       ├── with_checkboxes.html
│   │       ├── with_condensed_content.html
│   │       ├── with_grouped_rows.html
│   │       ├── with_hidden_columns_on_mobile.html
│   │       ├── with_hidden_headings.html
│   │       ├── with_sortable_headings.html
│   │       ├── with_stacked_columns_on_mobile.html
│   │       ├── with_sticky_header.html
│   │       ├── with_striped_rows.html
│   │       ├── with_summary_rows.html
│   │       ├── with_uppercase_headings.html
│   │       └── with_veritcal_lines.html
│   ├── navigation
│   │   ├── breadcrumbs
│   │   │   ├── contained.html
│   │   │   ├── full_width_bar.html
│   │   │   ├── simple_with_chevrons.html
│   │   │   └── simple_with_slashes.html
│   │   ├── command_palettes
│   │   │   ├── dark_with_icons.html
│   │   │   ├── semi_transparent_with_icons.html
│   │   │   ├── simple.html
│   │   │   ├── simple_with_padding.html
│   │   │   ├── with_footer.html
│   │   │   ├── with_groups.html
│   │   │   ├── with_icons.html
│   │   │   ├── with_images_and_descriptions.html
│   │   │   └── with_preview.html
│   │   ├── navbars
│   │   │   ├── dark_with_quick_action.html
│   │   │   ├── dark_with_search.html
│   │   │   ├── simple_dark.html
│   │   │   ├── simple_dark_with_menu_button_on_left.html
│   │   │   ├── simple.html
│   │   │   ├── simple_with_menu_button_on_left.html
│   │   │   ├── with_centered_search_and_secondary_links_dark.html
│   │   │   ├── with_centered_search_and_secondary_links.html
│   │   │   ├── with_quick_action.html
│   │   │   ├── with_search.html
│   │   │   └── with_search_in_column_layout.html
│   │   ├── pagination
│   │   │   ├── card_footer_with_page_buttons.html
│   │   │   ├── centered_page_numbers.html
│   │   │   └── simple_card_footer.html
│   │   ├── progress_bars
│   │   │   ├── bullets_and_text.html
│   │   │   ├── bullets.html
│   │   │   ├── circles.html
│   │   │   ├── circles_with_text.html
│   │   │   ├── panels.html
│   │   │   ├── panels_with_border.html
│   │   │   ├── progress_bar.html
│   │   │   └── simple.html
│   │   ├── sidebar_navigation
│   │   │   ├── brand.html
│   │   │   ├── dark.html
│   │   │   ├── light.html
│   │   │   ├── with_expandable_sections.html
│   │   │   └── with_secondary_navigation.html
│   │   ├── tabs
│   │   │   ├── bar_with_underline.html
│   │   │   ├── full_width_tabs_with_underline.html
│   │   │   ├── simple_on_dark.html
│   │   │   ├── tabs_in_pills.html
│   │   │   ├── tabs_in_pills_on_gray.html
│   │   │   ├── tabs_in_pills_with_brand_color.html
│   │   │   ├── tabs_with_underline_and_badges.html
│   │   │   ├── tabs_with_underline_and_icons.html
│   │   │   └── tabs_with_underline.html
│   │   └── vertical_navigation
│   │       ├── on_gray.html
│   │       ├── simple.html
│   │       ├── with_badges.html
│   │       ├── with_icons_and_badges.html
│   │       ├── with_icons.html
│   │       └── with_secondary_navigation.html
│   ├── overlays
│   │   ├── drawers
│   │   │   ├── contact_list_example.html
│   │   │   ├── create_project_form_example.html
│   │   │   ├── empty.html
│   │   │   ├── file_details_example.html
│   │   │   ├── user_profile_example.html
│   │   │   ├── wide_create_project_from_example.html
│   │   │   ├── wide_empty.html
│   │   │   ├── wide_horizontal_user_profile_example.html
│   │   │   ├── with_background_overly.html
│   │   │   ├── with_branded_header.html
│   │   │   ├── with_clone_button_on_outside.html
│   │   │   └── with_sticky_footer.html
│   │   ├── modal_dialogs
│   │   │   ├── centered_with_sinlge_action.html
│   │   │   ├── centered_with_wide_buttons.html
│   │   │   ├── simple_alert.html
│   │   │   ├── simple_alerts_with_left_aligned_buttons.html
│   │   │   ├── simple_with_dismiss_button.html
│   │   │   └── simple_with_gray_footer.html
│   │   └── notifications
│   │       ├── condensed.html
│   │       ├── simple.html
│   │       ├── with_actions_below.html
│   │       ├── with_avatar.html
│   │       ├── with_buttons_below.html
│   │       └── with_split_buttons.html
│   └── page_examples
│       ├── detail_screens
│       │   ├── index.html
│       │   ├── sidebar_on_dark.html
│       │   └── stacked.html
│       ├── home_screens
│       │   ├── sidebar_on_dark.html
│       │   └── stacked.html
│       └── settings_screens
│           ├── sidebar_on_dark.html
│           └── stacked.html
└── marketing
    └── page_sections
        └── hero_sections
            ├── simple_centered.html
            ├── simple_centered_with_background_image.html
            ├── split_with_bordered_screenshot.html
            ├── split_with_code_example.html
            ├── split_with_image.html
            ├── split_with_screenshot.html
            ├── with_angled_image_on_right.html
            ├── with_app_screen_shot.html
            ├── with_bordered_app_screenshot.html
            ├── with_image_tiles.html
            ├── with_offset_image.html
            └── with_phone_mockup.html

65 directories, 382 files