Tool for Tailwind CSS to inspect, edit, and copy styles in real-time. Provides access to Tailwind classes, lets you convert elements to components, and improves development efficiency.
Features
Universal Design Inspector
Inspect any website using Tailwind, allowing you to view and understand the design with ease. You can hover over elements to see real-time Tailwind classes.
Design Edit and Update
Edit designs directly within the browser. You can try out new Tailwind CSS changes and immediately see the results.
Component Conversion
Convert any element to a Tailwind component easily. This helps in reusing designs efficiently across different projects.
Color Theme Explorer
Explore different color themes and adjust to your preference instantly. This allows for quick experimentation with design aesthetics.
Devtools integration
Integration with browser DevTools for seamless inspection and styling using Tailwind.
Element navigator
Allows users to navigate through HTML elements with visual highlights to better inspect and edit.
Tailwind v3.3 support
Updated support for Tailwind CSS version 3.3, ensuring compatibility with the latest features.
Isolation of UI errors
Improvements to debugging tools to isolate and fix UI errors more effectively.
Copy-paste support
Enhanced copy-paste functionality for improved user experience in styling and configuration.
Accessibility
Classes and examples related to accessibility features in Tailwind CSS.
Backgrounds
Background related classes and how to apply them using Tailwind CSS.
Borders
Classes for border styles and usage examples in Tailwind CSS.
Effects
CSS classes for effects and how to use them in Tailwind.
Filters
Classes for applying filter effects in Tailwind CSS.
Flexbox and Grid
Classes for using Flexbox and CSS Grid systems in Tailwind CSS.
Interactivity
Interactivity related classes in Tailwind CSS and examples of using them.
Layout
Layout management classes in Tailwind CSS and how to utilize them.
Sizing
Sizing related classes and examples for use in Tailwind CSS.
Spacing
Classes for spacing and margin/padding configurations in Tailwind CSS.
SVG
Classes and examples specifically for SVG handling in Tailwind CSS.
Tables
Classes for styling tables in Tailwind CSS.
Transforms
Classes and examples for CSS transforms in Tailwind CSS.
Transitions and Animation
Classes for adding transitions and animations using Tailwind CSS.
Typography
Typography related classes in Tailwind CSS and examples of their use.
Affiliate Program
Become a partner and earn 30% commission on all sales. Payouts are made every month. Affiliates receive quality marketing assets for easy promotion.
High Commissions
Tailscan offers a 30% commission on both one-time payments and recurring subscriptions. Some affiliates earn up to $60 per referral.
Regular Payouts
Payouts are processed every 15th of the month for the previous month. The referral cookies last for 30 days, and the payout threshold is $25.
First-Class Support
Provides quality marketing assets and promotional material to assist affiliates in achieving success.
Direct Line of Contact
Affiliates get a direct line of contact with Tailscan, allowing them to ask questions and seek help as needed.
Visual Tailwind builder
Build, design and debug Tailwind CSS projects directly in the browser.
Cache management
Ensure updates are reflected immediately by handling cache effectively.
svh (Smallest Viewport Height)
Represents the smallest possible viewport height visible to the user, excluding all user agent interface elements. It is useful for ensuring the viewport height does not include browser bars.
lvh (Largest Viewport Height)
Represents the largest possible viewport height visible to the user, behaving similarly to the traditional 100vh.
dvh (Dynamic Viewport Height)
Reflects the current viewport height, excluding the user agent’s interface. It updates as the viewport height changes, showing how vertical viewport height excludes interface elements dynamically.
h-dvh class
Makes an element span the entire height of the viewport dynamically, adjusting as the browser UI changes.
h-lvh class
Sets an element’s height to the largest possible height of the viewport, effectively similar to 100vh.
h-svh class
Sets an element’s height to the smallest possible height of the viewport, excluding UI elements like the browser menu bar.
Browser Compatibility
The new classes are compatible with most modern browsers, excluding older versions like Safari 14.
Tailwind CSS Integration
Allows you to build and design Tailwind CSS websites directly in the browser using Tailscan.
Rebranding
Updated the visual identity to enhance the branding of Tailscan, making it more visually cohesive and professional.
Price Change
Increased the pricing plans, which, according to the update, helped reflect the value provided to users.
Growth Metrics
Reported growth from $580 to $1,500 MRR (Monthly Recurring Revenue) in four months, showing an increase in customer adoption and revenue.
Building Tailscan 2
Mentioned ongoing development of Tailscan 2, aiming to improve the product with more features and capabilities.
Flowbite
Offers an extensive library of Tailwind CSS components and templates designed to speed up development. Equipped with UI elements such as buttons, dropdowns, and navigation bars.
Daisy UI
Provides a comprehensive set of components with robust color themes, utilizing Tailwind CSS. Includes features that enhance development, prioritizing customizability and minimalistic design.
Lexicon
An impressive collection of detailed layouts and components, such as dashboards and form elements, optimized for UI/UX design in Tailwind CSS.
Crulp
Focuses on modern UI patterns and full-stack components, offering alerts, badges, and checkboxes, compatible with Tailwind CSS for fast design flow.
Hyper UI
Offers a vast selection of UI components focused especially on dashboard layouts, designed for adaptability with projects using Tailwind CSS.
Tailwind UI
Comprehensive and flexible collection of ready-to-use components for Tailwind CSS, focusing on production-grade design with user experience optimization.
Material UI
Blends React components with Material Design elements for seamless integration with Tailwind CSS, offering pre-designed interactive UI elements.
TailKit
Provides UI components and pages for building a wide variety of applications quickly and effortlessly, leveraging the flexibility of Tailwind CSS.
CSS Grid Integration with Tailwind
This feature allows you to use CSS Grid functionalities using Tailwind CSS classes, enabling the creation of complex layouts directly in HTML without writing custom CSS.
Responsive Design
Tailwind's grid utilities include responsive prefixes that allow dynamic adjustment of the layout according to different screen sizes.
Grid Template Columns and Rows
Utilities for defining the number, size, and configuration of columns or rows in a grid using classes like 'grid-cols-3' and 'grid-rows-2'. This aids in quickly setting up a grid structure.
Grid Gap
This feature allows you to add spacing between grid items using classes like 'gap-4', providing easy management of item spacing without additional CSS.
Grid Item Placement
With utilities like 'col-span-2' and 'row-span-3', you can control the span and placement of grid items, simplifying the layout customization process.