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

27 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/src/ 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/src/.
  • Gemini does not need to setup the ./playground directory structure. The user will have done that before running Gemini.
  • Only modifiy the ./playground/src/css/input.css and ./playground/src/index.html. All other files will be created and maintained by the user.
  • The ./playground/src/index.html has a valid structure for the project layout. When the user asks Gemini to make changes to it, Gemini should consider the prompt to be made in the context of changing the index.html body unless explicitly called out in the user's input prompt.
  • The ./playground/src/main.css will be generated by the user before viewing the changes made by the agent. No tailwindcss cli command needs to be run by Gemini.

Reference file structure for a new ./playground project.

./playground/
├── README.md
└── src
    ├── css
    │   └── input.css
    ├── index.html
    └── vendor
        └── js
            └── tailwindcss-elements.1.0.0.js

5 directories, 4 files

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