Published
Edited
Nov 26, 2021
Tailwind css
text-lg
mx-auto
non opinionated
no naming conventions
small bundle size
Installation
Create react app
npm install...
install craco
npm install...
replace package.json scripts start end and build
create a craco.config
create your config file
npx tailwind.config.js...
configure tailwind to remove unused styles in production
purge
src... index.css van 3 comandos
npm start
<install algo que te hace la vida mas facil
text-lg font-bold sm:text-xl md:text-2xl lg:text-4xl
bg-yellow-300
text-blue-500
spacing scale
p-4 px-6 py-3
text-center
#responsive
lg:text-red-500 start changing after getting bigger
bg-gradient-to-r from-yellow-300 to-red-500 via-blue-400
md:via-gray-400
#grids
<div classname="grid gap-4 grid-cols-4 mt-6>
<div classname="bg-gray-200 h-24 flex items-center justify-center rounded-xl text-gray-400">Element</div>
<div classname="bg-gray-200">Element</div>
const elements = 1,2,3,4
{elements.map((element) => ( <div classname={ `bg-gray-200 h-24 flex items-center justify-center rounded-xl text-gray-400 ${element === 1 && "col-span-2"}´>Element</div> )
div con un container class container mx-auto px-4 my-6
button click me! classes: bg-orange-500 text-lg font-medium py-3 px-6 rounded-md text-yellow-800 hover:bg-yellow-600 hover:text-white
@layer components {
.btn{
@apply bg-orange-500 text-lg font-medium py-3 px-6 rounded-md text-yellow-800 hover:bg-yellow-600 hover:text-white
}
} en el index.css document :)
<div className="container mx-auto px-4 my-6">
<div className="my-8 bg-gray-100 rounded-lg p-6 space-y-4 group">
<div className="w-20 h-20 rounded-md bg-green-600 transform group-hover:translate-x-60 transition duration-500">
</div>
<div className="w-20 h-20 rounded-md bg-green-600 delay-200 group-hover:rotate-90"></div>
<div className="w-20 h-20 rounded-md bg-green-600"> </div>
</div>
</div>
tailwind.config extend: translate: "group-hover", rotate: group-hover
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
