Loading...

This is taking longer than expected.

Help centre Weblabor Admin
es en

The Html Tool

Clean up HTML and convert it to Tailwind CSS by pasting it and choosing what to do with it.

Html Tool takes HTML you paste, applies one clean-up or conversion to it, and gives you the result to copy. Everyone can use it. This guide shows how, and what each option does.

Use the tool

  1. Choose Html Tool in the Tools group of the side menu.
  2. In Type, choose what you want to do with the HTML.
  3. If the option you chose needs them, the Url CSS and Url fields appear. Fill them in.
  4. Paste your code into HTML.
  5. Click Generate Result.

The result appears in a box below the form. It is read-only: select it and copy it to use it elsewhere. The tool does not save anything, and it does not change any page on the web; leaving the page discards the result.

Each time you click Generate Result, the previous result and notices are cleared first, so if a field is missing or wrong you see only what to fix. When the tool cannot download an address, a notice above the result says so, once for each address.

Type and HTML are always required. Url CSS must be a link starting with http:// or https:// to a file ending in .css, which may be followed by parameters, such as https://example.com/app.css?v=2. Url must be a full link starting with http:// or https://, such as https://example.com/page.

What the tool can download

Some options download stylesheets: the one in Url CSS, or those the HTML links to. The tool only downloads from public web addresses. It waits at most 10 seconds for each one, follows at most 3 redirections, and stops at 5 MB. When a download fails, the notice above the result shows one of these messages, and the result is still generated, without that stylesheet:

  • The address … is not allowed.: the address is not a public http or https address, such as one on a private network, or a redirection leads to one.
  • The address … could not be downloaded.: the site did not answer in time, answered with an error, or redirected more than 3 times.
  • The address … is larger than the allowed size.: the file is larger than 5 MB.

What each type does

These need only the HTML:

  • Ltr/Rtl Cleaner para Tailwind CSS: keeps the left-to-right version of each class and drops the right-to-left one.
  • Desminificador de HTML: lays out minified HTML with one element per line and indentation.
  • Convertidor de estilos en línea a clases Tailwind CSS: turns style attributes into Tailwind classes where it can. When it converts an element, it replaces the whole style attribute with the classes, so any property it had no class for is lost. An element it cannot convert at all keeps its style.
  • Combinador de CSS: downloads every linked stylesheet from its address, gathers them and every <style> block into a single stylesheet, and replaces them with one link to it. That file is kept by the product and named after its content, so each result links its own stylesheet: using the combiner again, or any of the page options below, which combine stylesheets too, does not change the one an earlier result links.
  • Remover los scripts de HTML: removes scripts, noscript blocks and iframes. It also deletes any text that looks like code, even text visible on the page: any text with the word function, an arrow => or ${ in it is removed.
  • Remover comentarios del código: removes HTML comments, Blade {{-- --}} comments, /* */ comments and whole lines that start with two slashes (//). The rest stays as it is: text after --, such as a CSS variable, and two slashes in the middle of a line, such as in a link, are not removed.

These also need Url CSS, the link to the page's compiled stylesheet. The tool downloads the stylesheet from the address you give:

  • Extractor de configuración de colores Tailwind CSS: finds the named colours the HTML uses, such as primary, and returns their colour scales: the complete one and only the shades used.
  • Inliner de colores semánticos Tailwind CSS: replaces named colours with the actual colour they stand for.
  • Corrección de clases incorrectas de Tailwind CSS: keeps valid Tailwind classes, converts the others to Tailwind when the stylesheet defines them, and removes those it does not.
  • Convertir clases faltantes a Tailwind CSS: converts every class the stylesheet defines to Tailwind classes, and removes the ones it cannot convert.

These need Url, the address the HTML came from, so that relative links can be completed:

  • Resolutor de URLs relativas: turns relative links to images, stylesheets and other files into full links.
  • Convertir página a Tailwind CSS: converts a whole page. It first lays out the HTML, completes its links with the Url and combines its stylesheets; then it removes its scripts, keeps only the body and converts its classes and inline styles to Tailwind.
  • Limpiar página de Tailwind CSS completa: cleans a whole page already built with Tailwind. It first lays out the HTML, removes its comments, completes its links with the Url and combines its stylesheets; then it removes its scripts, keeps only the body, drops right-to-left classes, replaces named colours, fixes incorrect classes and converts inline styles.

Limpiar página de Tailwind CSS por bloques needs both Url CSS and Url. It cleans a piece of a page the same way, without keeping only the body. It reads the colours and classes from the stylesheet in Url CSS; if that address cannot be downloaded, the notice above the result names it.

The two whole-page options read the colours and classes from the stylesheet they combined from the page. If the page has no stylesheet, the result says No css detected.

Back