{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-uxpin-merge","document":[{"data":{"title":{"text":"What is UXPin Merge?"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"using-react.js-components","document":[{"data":{"title":{"text":"Using React.js Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"creating-a-library","document":[{"data":{"title":{"text":"Creating a Library"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ai-assisted-merge-integration","document":[{"data":{"title":{"text":"AI-Assisted Merge Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"start-with-a-boilerplate-repo","document":[{"data":{"title":{"text":"Start with a Boilerplate Repo"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"integrating-your-own-components","document":[{"data":{"title":{"text":"Integrating Your Own Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"config-file","document":[{"data":{"title":{"text":"Config File"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"webpack-configuration","document":[{"data":{"title":{"text":"Webpack Configuration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"wrapper-component","document":[{"data":{"title":{"text":"Wrapper Component"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"adjusting-components","document":[{"data":{"title":{"text":"Adjusting Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"configuring-the-properties-panel","document":[{"data":{"title":{"text":"Configuring the Properties Panel"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"authoring-and-managing-jsx-presets","document":[{"data":{"title":{"text":"Authoring and Managing JSX Presets"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"cli-tool","document":[{"data":{"title":{"text":"CLI Tool"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ci-servers","document":[{"data":{"title":{"text":"Connecting code to UXPin (CI & push)"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"version-control","document":[{"data":{"title":{"text":"Version Control"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"patterns","document":[{"data":{"title":{"text":"Patterns"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"tailwind-css-integration","document":[{"data":{"title":{"text":"Tailwind CSS Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-design-system-documentation","document":[{"data":{"title":{"text":"Merge Design System Documentation"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-component-manager","document":[{"data":{"title":{"text":"Merge Component Manager"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"storybook-integration","document":[{"data":{"title":{"text":"Storybook integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-faq","document":[{"data":{"title":{"text":"Frequently Asked Questions"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Tailwind CSS Integration"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"What is Tailwind CSS?"},"content":{"html":"

Tailwind CSS is a utility-first CSS framework designed to speed up front-end development. It allows you to control the layout, color, spacing, typography, shadows, and more directly within HTML using classes. This means you can style elements without having to write a bunch of CSS. It's like having a set of building blocks that you can easily put together to create a website that looks just the way you want it to.

Tailwind CSS creators made Tailwind UI, a library of pre-built Tailwind components and patterns that users can copy to their projects. This library is also integrated as a Merge library.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Tailwind UI Library"},"content":{"html":null}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip","tip_title":"Note","tip":{"html":"

Tailwind UI is currently in Beta version.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

The UXPin built-in Tailwind UI Library is integrated as a Merge library, fully customizable, and themeable. This integration brings the power and flexibility of Tailwind CSS directly to your prototyping workflow. Currently, there are 18 components and elements available, along with handy component compositions and patterns to kickstart your projects.

"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/Zeg0nv_jD4D4xSmK_03.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Custom Components"},"content":{"html":"

Tailwind UI allows you to create custom Tailwind components based on the HTML code of Tailwind CSS components. These components are fully customizable.

"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/Zeg1C__jD4D4xSmb_04.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip","tip_title":"Note","tip":{"html":"

Components that require JavaScript may not function correctly after being uploaded to UXPin, as the JavaScript code is removed during the component creation process

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Users can also use AI Component Creator to generate a custom component for their UXPin library.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Global and Local Theme Prop"},"content":{"html":"

Tailwind UI includes support for both global and local themes.

"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/Zeg1QP_jD4D4xSmh_05.png?auto=format%2Ccompress&rect=0%2C0%2C1504%2C900&w=752&h=450","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/Zeg1QP_jD4D4xSmh_05.png?auto=format%2Ccompress&rect=0%2C0%2C1504%2C900&w=1504&h=900"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Global Theme: You can set up a global theme to propagate across the entire page, ensuring design consistency.

Local Theme: If you want to change the theme only for a specific component you can set up the the local theme property to apply theme changes exclusively to specific pages, offering flexibility in design customization.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Additional Resources "},"content":{"html":"

Heroicons – Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS, that you can use with the Icon component or property. Just copy SVG and paste it into the component or property; it’s that easy!

Hero Patterns – Seamless SVG background patterns by the makers of Tailwind CSS, that you can add as custom CSS to apply as the background. 

Utilities and Classes – Tailwind CSS offers a wide range of customizable utility classes to streamline your front-end development. Explore the documentation to discover how you can easily customize colors, typography, and more for your projects.

Tailwind UI – Ready-made components and patterns made by Tailwind CSS creators. You can copy the code on the website and paste it as a Custom Component in the Merge library.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Design Handoff"},"content":{"html":"

All Tailwind components in UXPin, regardless if they were built-in or added by you, are backed with code. Once you create your design with Tailwind built-in or custom components, you can grab their HTML code or open them in StackBlitz from the Spec Mode. This speeds up your product development because your components don't require translation from design to code.

"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/Zeg1hP_jD4D4xSmm_06.mp4"},"video_description":{"text":null}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"tailwind-css-integration","meta_description":"UXPin's merge Docs, tailwind css integration for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Tailwind CSS Integration | Merge","page_title":"Tailwind CSS Integration | Merge"}}