Transform your design workflow and save a ton of time with the Tailwind Font Size Generator plugin for Figma! This intuitive plugin allows you to seamlessly generate font sizes and font styles using the default Tailwind CSS font scale, ensuring your designs stay consistent and aligned with the po...
Use in combination with thetailwind-css-font-size-generatorFigma plugin to make life easy. Export font size styles from figma into your codebase with a single command. Installation Install the cli globally so you can use it in any directory ...
"font-sizes": generates CSS variables for all of the font sizes defined in the Tailwind config. For example, if you only want to generate CSS variables for colors, you can call thetailwindCssVariablesfunction like this: tailwindCssVariables(["colors"]); ...
@layer base { h1 { font-size: theme("fontSize.2xl"); } h2 { font-size: theme("fontSize.xl"); } } @layer components { .card { background-color: theme("colors.white"); border-radius: theme("borderRadius.lg"); padding: theme("spacing.6"); box-shadow: theme("boxShadow.xl");...
// Tailwind TSS Generator // Created by César Estrada // https://github.com/macCesar/tailwind-tss-color-generator // Reset Styles 'Window': { backgroundColor: '#ffffff' } 'ImageView[platform=ios]': { hires: true } 'View': { width: Ti.UI.SIZE, height: Ti.UI.SIZE } '.vertical...
(scss|sass)$/const lessRegex = /\.less$/const stylRegex = /\.styl$/const imageRegex = /\.(png|jpe?g|gif|svg)$/iconst fontRegex = /\.(ttf|woff2?|eot|otf)$/const mediaRegex = /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/const jsonRegex = /\.json$/const getStyleLoaders = (css...
bg-gray-900"></span> </div> </label> <button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-...
} .chat-notification-title { color: #1a202c; font-size: 1.25rem; line-heigh...
flex sm:items-center sm:justify-between sm:px-6 lg:px-8"aria-label="Global"><divclassName="flex items-center justify-between"><LinkclassName="w-full flex-none text-xl text-white font-semibold p-6"href="/"aria-label="Brand">AI-UI-Components-Generator</Link></div></nav></header><...
gl-font-normal gl-font-semibold gl-font-bold How to set up and validate locally The config/helpers/tailwind/css_in_js.js configuration lets us support Tailwind-incompatible legacy CSS utilities through the Tailwind generator. Those are the utilities we need to migrate to their Tailwind equivalent...