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 'b63c43b3f6'
${ noResults }
tailwind-ai/GEMINI.md

26 KiB
Raw 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.

Development Sandbox

All file modifications must be confined to the ./playground directory. This is the designated area for all development and coding work. The Gemini CLI must not, under any circumstances, attempt to create, modify, or delete files outside of the ./playground

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