Tailwind Skeleton Generator

Effortlessly convert Tailwind + HTML (JSX/TSX) into captivating animated loaders, ensuring a seamless user experience as content loads.

Features

Generate Tailwind loading skeleton direct from your code as demonstrated below:

Tip: For best results make sure to select the right portion of your code including the start/end tags

How to Run "Create Tailwind Skeleton" Extension

Follow these steps to quickly generate a Tailwind CSS skeleton for your project using our VSCode extension:

Step 1: Installation

First, ensure you have Visual Studio Code installed. Then, install the "Create Tailwind Skeleton" extension by searching for it in the VSCode Extensions Marketplace and clicking the "Install" button.

Step 2: Open Your Project

Open the project where you want to create a Tailwind CSS skeleton in VSCode.

Step 3: Select the Code Block

Navigate to the file that contains the code block for which you want to create a Tailwind CSS skeleton. Use your mouse or keyboard shortcuts to select the specific block of code you're interested in.

Step 4: Open the Context Menu

With the code block selected, right-click on the highlighted area to open the context menu. If you're using a Mac, you might need to use a two-finger click or the control + click shortcut to open the context menu.

Step 5: Create Tailwind Skeleton

In the context menu, look for the option labeled "Create Tailwind Skeleton" and click on it. The extension will then automatically generate the Tailwind CSS skeleton based on the selected block of code.

Step 6: Review the Skeleton

After the skeleton is generated, review it to ensure it meets your needs. The extension should have created a structured CSS file or code block inline with Tailwind CSS classes that correspond to your original code's structure and styling intentions.

Step 7: Save and Use

Save the generated Tailwind CSS skeleton and incorporate it into your project as needed. You can now use this as a base to further customize and enhance your project's styling with Tailwind CSS.

Troubleshooting

If you encounter any issues while using the "Create Tailwind Skeleton" extension, such as the context menu option not appearing or the skeleton not generating as expected, consider checking the following:

• Ensure your VSCode and the extension are updated to the latest versions.
• Verify that your project is set up to support Tailwind CSS.
• Restart VSCode to refresh the extension and try the steps again.
• Consult the extension's documentation or support resources for additional troubleshooting tips or to report an issue.

Release Notes

0.5.0

• Initial release of Tailwind Skeleton Generator

Feedback

We're eager to hear if it strikes the right chord with you and would greatly value your opinion. 🤔💭 What are your thoughts?"

For more information

• Made as a Same Day Skunkworks project by Agency Enterprise
• Tailwind Skeleton Generator