Comments (2)
Hello,
If possible, can you provide a complete example of HAML with tailwind css?
thanks.
from tailwindo.
Hi @abdumu,
here's an example, taken from the Tailwind UI free previews:
Original HTML:
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div>
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="#">
<span class="sr-only">Workflow</span>
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg">
</a>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Heroicon name: outline/menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div class="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Product</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Features</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Marketplace</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Company</a>
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Log in</a>
</div>
</nav>
</div>
<!--
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div class="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="">
</div>
<div class="-mr-2">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span class="sr-only">Close main menu</span>
<!-- Heroicon name: outline/x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Product</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Marketplace</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Company</a>
</div>
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100">
Log in
</a>
</div>
</div>
</div>
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block xl:inline">Data to enrich your</span>
<span class="block text-indigo-600 xl:inline">online business</span>
</h1>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
</p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
Get started
</a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
Live demo
</a>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="">
</div>
</div>
converted to HAML it looks like this:
/ This example requires Tailwind CSS v2.0+
.relative.bg-white.overflow-hidden
.max-w-7xl.mx-auto
.relative.z-10.pb-8.bg-white.sm:pb-16.md:pb-20.lg:max-w-2xl.lg:w-full.lg:pb-28.xl:pb-32
%svg.hidden.lg:block.absolute.right-0.inset-y-0.h-full.w-48.text-white.transform{"aria-hidden" => "true", :class => "translate-x-1/2", :fill => "currentColor", :preserveaspectratio => "none", :viewbox => "0 0 100 100"}
%polygon{:points => "50,0 100,0 50,100 0,100"}
%div
.relative.pt-6.px-4.sm:px-6.lg:px-8
%nav.relative.flex.items-center.justify-between.sm:h-10.lg:justify-start{"aria-label" => "Global"}
.flex.items-center.flex-grow.flex-shrink-0.lg:flex-grow-0
.flex.items-center.justify-between.w-full.md:w-auto
%a{:href => "#"}
%span.sr-only Workflow
%img.h-8.w-auto.sm:h-10{:src => "https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"}/
.-mr-2.flex.items-center.md:hidden
%button.bg-white.rounded-md.p-2.inline-flex.items-center.justify-center.text-gray-400.hover:text-gray-500.hover:bg-gray-100.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-indigo-500{"aria-expanded" => "false", :type => "button"}
%span.sr-only Open main menu
/ Heroicon name: outline/menu
%svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M4 6h16M4 12h16M4 18h16", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
.hidden.md:block.md:ml-10.md:pr-4.md:space-x-8
%a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Product
%a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Features
%a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Marketplace
%a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Company
%a.font-medium.text-indigo-600.hover:text-indigo-500{:href => "#"} Log in
/
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
.absolute.z-10.top-0.inset-x-0.p-2.transition.transform.origin-top-right.md:hidden
.rounded-lg.shadow-md.bg-white.ring-1.ring-black.ring-opacity-5.overflow-hidden
.px-5.pt-4.flex.items-center.justify-between
%div
%img.h-8.w-auto{:alt => "", :src => "https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"}/
.-mr-2
%button.bg-white.rounded-md.p-2.inline-flex.items-center.justify-center.text-gray-400.hover:text-gray-500.hover:bg-gray-100.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-indigo-500{:type => "button"}
%span.sr-only Close main menu
/ Heroicon name: outline/x
%svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M6 18L18 6M6 6l12 12", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
.px-2.pt-2.pb-3.space-y-1
%a.block.px-3.py-2.rounded-md.text-base.font-medium.text-gray-700.hover:text-gray-900.hover:bg-gray-50{:href => "#"} Product
%a.block.px-3.py-2.rounded-md.text-base.font-medium.text-gray-700.hover:text-gray-900.hover:bg-gray-50{:href => "#"} Features
%a.block.px-3.py-2.rounded-md.text-base.font-medium.text-gray-700.hover:text-gray-900.hover:bg-gray-50{:href => "#"} Marketplace
%a.block.px-3.py-2.rounded-md.text-base.font-medium.text-gray-700.hover:text-gray-900.hover:bg-gray-50{:href => "#"} Company
%a.block.w-full.px-5.py-3.text-center.font-medium.text-indigo-600.bg-gray-50.hover:bg-gray-100{:href => "#"}
Log in
%main.mt-10.mx-auto.max-w-7xl.px-4.sm:mt-12.sm:px-6.md:mt-16.lg:mt-20.lg:px-8.xl:mt-28
.sm:text-center.lg:text-left
%h1.text-4xl.tracking-tight.font-extrabold.text-gray-900.sm:text-5xl.md:text-6xl
%span.block.xl:inline Data to enrich your
%span.block.text-indigo-600.xl:inline online business
%p.mt-3.text-base.text-gray-500.sm:mt-5.sm:text-lg.sm:max-w-xl.sm:mx-auto.md:mt-5.md:text-xl.lg:mx-0
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
.mt-5.sm:mt-8.sm:flex.sm:justify-center.lg:justify-start
.rounded-md.shadow
%a.w-full.flex.items-center.justify-center.px-8.py-3.border.border-transparent.text-base.font-medium.rounded-md.text-white.bg-indigo-600.hover:bg-indigo-700.md:py-4.md:text-lg.md:px-10{:href => "#"}
Get started
.mt-3.sm:mt-0.sm:ml-3
%a.w-full.flex.items-center.justify-center.px-8.py-3.border.border-transparent.text-base.font-medium.rounded-md.text-indigo-700.bg-indigo-100.hover:bg-indigo-200.md:py-4.md:text-lg.md:px-10{:href => "#"}
Live demo
.lg:absolute.lg:inset-y-0.lg:right-0{:class => "lg:w-1/2"}
%img.h-56.w-full.object-cover.sm:h-72.md:h-96.lg:w-full.lg:h-full{:alt => "", :src => "https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"}/
You can easily convert any HTML (without embedded code) to HAML using this tool: https://html2haml.herokuapp.com/ if you need more examples.
from tailwindo.
Related Issues (20)
- I get this output: `No file with matching extensions found` HOT 1
- TailwindCSS 1.x HOT 1
- Conclusion: don't install symfony/console v5.0.5 HOT 4
- sr-only accidentally removed HOT 1
- Extract changes to a single file & recursively convert a whole directory should create a single css file HOT 3
- command not found: tailwindo HOT 1
- Question: Can I convert bootstrap.css to tailwind CSS using @apply? HOT 1
- Installation questions HOT 3
- BoostrapFramework.php missing bg- on line 538 HOT 2
- Wont install on latest php/composer HOT 2
- flex-grow-1 and flex-shrink-1 not converted
- Extra hover:bg-* in class generated for btn-outline-* HOT 1
- When using components=true duplicate Classes are created HOT 2
- React bootstrap support. HOT 4
- Make it run in docker
- Add Outline & Gray styles to the button utility HOT 1
- Update for PHP 8.1 and Symfonly Console 6.0? HOT 5
- Tailwindo Documentation Links not Working
- Upgrade supported major versions of frameworks
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwindo.