Tailwind colors js build file. What's breaking changes from v4? Interactivity. Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using existing utilities. This tool bridges the gap between arbitrary colors and Tailwind's utility-first approach, ensuring a more efficient and integrated development experience. Using arbitrary values. The website will then generate the closest Tailwind color on the right hand side, together with the corresponding HEX code. ; Then use shade 50 from light mode and 950 from dark mode to represent our app background. 2, last published: 8 months ago. Along with these basics, Tailwind makes it easy to customize and extend the default colors to match your brand. Explore the Tailwind CSS color design system with ease. Prefix a text-decoration-color utility with a variant like hover:* to only apply the utility in that state: Jul 25, 2024 · Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-designed styles and classes to simplify the process of styling web applications. Tailwind uses literal color names (like red, green, etc. , 300 or 700) for hover effects or variations. By default Tailwind makes the entire default color palette available as background colors. Enter a hex colour code and get the class name colour for Tailwind CSS. Before diving into the background color classes, it’s important to understand Tailwind’s default color palette. Instead of using the dark: prefix for every class, I want to manage color changes through CSS variables in my React project. Click to copy any HEX, OKLCH, or Tailwind 4 color class. In this workshop, we're going to implement semantic, themable color design tokens in Tailwind CSS. see all About Tailwind Color Generator. Examples Basic example. Simplify your workflow and create visually stunning, responsive designs in seconds. ) and a numeric scale (where 50 is light and 900 is dark) by default. Below is a collection of ready-to-use Tailwind gradients. Click on any color in the palette to copy its hex value. Nov 17, 2020 · Second part: Extend Tailwind colors config. You can customize your color palette by editing the theme. Define a CSS variable with any color format, in CSS @theme {--color-primary: #aab9ff;} 2. Sep 11, 2023 · Generation of Tailwind Color Palettes. In this lesson, we'll learn how they work. Elevate your designs with professional gradients that you can build, save, and apply in TailwindCSS or export in versatile formats for any platform. Each color is available in various shades, numbered from 100 (lightest) to 900 (darkest) , giving developers ample flexibility to create a visually appealing and Tailwind is a framework for building custom designs, and different designs need different typography, colors, shadows, breakpoints, and more. Browse the color palette from slate to rose and copy the codes easily. For example, use hover:text-blue-600 to apply the text-blue-600 utility on hover. The theme section of your tailwind. Tailwind CSS Colors Use TW elements colors styles to change your background color, text color with custom colors, or pick from the color palette Color palette Palette de couleurs par défaut. We can use shade 950 for light mode and 50 from dark mode to represent our body text color. exports = { Tailwind is a framework for building custom designs, and different designs need different typography, colors, shadows, breakpoints, and more. Here’s what I’m trying to achieve: Define custom colors (e. Made by Tone Row Explore all Tailwind CSS v4 and v3 colors. Generate, edit, and export colors for your design with our intuitive color generator tool. Sep 17, 2024 · Tailwind Color Picker by Shikhar Verma is a simple yet effective tool that helps you pick base colors and generates the Tailwind CSS classes for different shades. com A collection of Tailwind CSS color tokens exported in HEX, RGBA, and OKLCH — ready to use with CSS, SCSS, LESS, and Stylus. 16 • 5 months ago • 986 dependents • MIT published version 0. Mar 1, 2025 · Tailwind CSS uses a systematic approach to color management, providing a predefined set of color palettes based on shades of gray and named colors, such as red, yellow, blue, and more. One of its standout features is the effortlessly managing background colors using predefined classes. We think this is the best choice for most projects, and have found it easier to maintain than using abstract names like primary or danger. 0-3. Elevate your designs with enhanced accessibility and future-proof colors. Mar 15, 2023 · Step 2: Use Tailwind’s Color Utilities. I created this tool to help me quickly configure Tailwind colors. Applying Tailwind Colors in CSS. Tailwind comes with a predefined set of colors named by their general hue and a number indicating their lightness or darkness, such as gray-500 or blue-700. Each color comes in various shades, allowing for fine-tuned color selection. To get started, it's best to first pick an overall color palette to use for TailwindCSS Design even faster with our collection of interactive tools to generate code for Tailwind CSS, generate color palettes, gradients for backgrounds or texts, grids for your layout, shadows for your components, and more. Generate beautiful Tailwind CSS color shades and palettes from any base color. However, the default set of colors provided by Tailwind may not always meet the requirements of your project. Just input your HEX, HSL or RGB color, and our tool will automatically calculate the matching Tailwind v4 color class. Text Colors. Explore the Tailwind CSS v4 Emerald color with ui examples, gradients, and complementary colors. We use the Delta E algorithm, which is the official way to measure the difference between two colors. Create and customize beautiful Tailwind CSS color palettes. By combining a comprehensive color reference, custom palette creation, and seamless integration with TailwindCSS projects, this tool addresses a common pain point in the development Feb 2, 2024 · Understanding Tailwind’s Color Palette. config file, for example: module. These colors are then assigned to textColors , backgroundColors and borderColors . Find all the Tailwind CSS colors in a handy cheatsheet with hex, hsl and rgb values. The spacing key allows you to customize the global spacing and sizing scale for your project. Sep 4, 2022 · TailwindCSSでの色追加は、さまざまな方法はありますが、今日は二つの方法を紹介したいと思います 以下の例を例えで記事を書きたいと思います Placeholder Colors. Each color comes in 11 different shades, giving you precise control over your design. After conversion, the tailwind color class or equivalent color codes are ready for use. You can customize your color palette by editing theme. Let’s explore some advanced techniques you can use. Choose a base color using the color picker. backgroundColor in your tailwind. View and copy each color's code in multiple formats: HEX, RGB, HSL, OKLCH, CMYK, CIELAB, and HSV. , no default Tailwind colors. The tailwind color generator is an advanced tool designed for web developers, designers and digital artists. #E2E8F0. Smart Color Gradients. textColor or theme. You can customize your color palette by editing the colors variable in your Tailwind config file, or customize just your background colors using the backgroundColors section of your Tailwind config. inverted-colors. Instantly copy the HEX, OKLCH or Tailwind class for the Tailwind emerald color. Each color is available in various shades, numbered from 100 (lightest) to 900 (darkest) , giving developers ample flexibility to create a visually appealing and Create a Tailwind config file: Ensure your project has a tailwind. Arbitrary values Extending the Tailwind color palette. js file; create one if it doesn't exist. These low-level design decisions are often called design tokens, and in Tailwind projects you store those values in theme variables. The fastest way to get the Tailwind CSS color you want. From light pastels to deep, rich tones, you'll find colors that work perfectly for any project. The plugin will add colors to the theme. Tailwind provides a wide range of color options, from grayscale to vibrant hues. Background Colors. js file if needed. Enter a name for your color palette (e. Use utilities like text-blue-600 and text-sky-400 to control the text color of an element: Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color. However, shadow colors should not be included only their size can be specified. Tailwind CSS offers a flexible way to customize your project's colors to match your brand guidelines. Tailwind organizes its colors into groups, making it easy to find and use colors that complement each other. Sep 2, 2021 · The first approach would add to Tailwind’s own colors (the bg-red-500s and the border-green-900s,) while the second approach would mean that you’re creating a color palette entirely from scratch, i. There are 27 other projects in the npm registry using tw-colors. Tailwind CSS: BordersとRing Colorを使いこなして、Webサイトを魅力的にする 「Borders」は、要素の周囲に黒い枠線を追加します。枠線の太さ、スタイル、色を自由に設定できます。 Grab your Tailwind config! For more instructions on adding this to your theme, checkout on the Tailwind documentation on customizing colors. I was building a UI component library and needed to quickly generate a Tailwind config that can Nov 3, 2024 · Maintaining brand consistency across your website is crucial for establishing a strong visual identity. The Skeleton color system. #F1F5F9. #CBD5E1 #94A3B8 #64748B #475569 #334155 #1E293B TailwindCSS v3. Create stunning color themes for Tailwind CSS and shadcn/ui with ease. This change allowed Tailwind expert designers to choose colors outside the sRGB gamut—in fact, you will find some more saturated colors that exist only in the P3 gamut. Reload to refresh your session. Live Color Preview Done. Tailwind comes with a pre-made color palette to help you get started if you don't have your own specific branding in mind. This ends up being fairly practical for most projects, but Tailwind CSS Colors allow you to specify the default color palette for your project. Feb 20, 2025 · With Tailwind v4, colors are now defined using the OKLCH format in the Oklab color space. By default, Tailwind makes the entire default color palette available as background colors. Since many plugins are responsible for CSS properties that only accept a static set of values (like float for example), note that not every plugin has a corresponding key in the theme object. Tailwind CSS v2. Adding your palette: Extend Default Palette: To add your new palette alongside Tailwind's default colors, add it to the theme. When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in: By default, these colors are inherited by all color-related core plugins, like backgroundColor, borderColor, textColor, and others. Recent. The Default Tailwind Color Palette COLOR PALETTE This is a tool specifically for TailwindCSS. A tool to help generate color shades for Tailwind CSS. Get HEX, RGB, HSL, and OKLCH values instantly. Tailwind CSS includes a modern color palette with a wide range of beautiful colors. config. Perfect for designers and developers looking to extend Tailwind's default color palette with harmonious, accessible color variations. js若要添加自定义颜色，需要在项目根目录下找到或创建 Tailwind uses this same approach for gradients, shadow colors, transforms, and more. Discover perfect color combinations for your projects with Tailwind CSS. Colors in Tailwind CSS are defined as classes that you can apply directly to your HTML elements. Built with Vite, Jotai, Radix UI, Better Color Tools, and Tailwind. Naming your colors. You can use these colors and shades by Borders. Customize shades, preview designs, and copy Tailwind CSS classes effortlessly. Dec 2, 2023 · The default color palette includes common color names like red, blue, green, etc. textColor section. You can customize these colors in your tailwind. Except for screens, colors, and spacing, all of the keys in the theme object map to one of Tailwind’s core plugins. 2 Try various Color Spaces, lighten/darken them, and copy your fav to the palette Tailwind CSS Colors amber blue cyan emerald fuchsia green indigo lime orange pink purple red rose sky teal violet yellow A tool for creating new color shades based on a neural network and trained with the Tailwindcss palette. Usage To use these colors in your own files, enable th Copy any Tailwind color with our beautiful Tailwind 4 color palette. Use utilities like text-blue-600 and text-sky-400 to control the text color of an element: Create a Tailwind config file: Ensure your project has a tailwind. What is Tailwind CSS color system? Tailwind CSS color system is a comprehensive collection of pre-defined colors that includes a wide range of shades and variations. js file. Visualize how your colors will look across various UI elements and complete websites. You can see that we have a bunch of colors. - 15fathoms/tailwind-colors Mar 15, 2025 · In older versions (like v3), you’d tweak a tailwind. Tailwind allows you to extend the color palette in your configuration file: Jan 22, 2025 · color-mix() — which lets us adjust the opacity of any color value, including CSS variables and currentColor. 300 #5CB4DE. Many utilities in Tailwind are driven by theme variables, like bg-blue-500, text-xl, and shadow-md, which map to your underlying color palette, type scale, and shadows. Upgraded from RGB, it uses the wider P3 gamut for richer hues and better contrast. Any custom colors already defined there will remain if there are no name conflicts, but as per the Tailwind docs, this disables the default Tailwind color palette. Copy and use them directly in your project! Many utilities in Tailwind share a common namespace but map to different CSS properties. Many of these features have even simplified Tailwind internally, reducing the surface area for bugs and making the framework easier for us to Tailwind plugin for switching color theme with just one className. colors property in a tailwind. No JavaScript config is required out of the box, though you can still use it if you want. Sep 15, 2024 · Tailwind CSS has taken the web development world by storm, offering a utility-first approach to powerful and flexible styling. colors key of your Tailwind config. You switched accounts on another tab or window. In this guide, we'll walk you through adding brand-specific colors By default, Tailwind makes the entire default color palette available as outline colors. 0 added many colours to the palette from Tailwind 2. It's designed to help developers/designers quickly create infinite combinations of colors formatted as a copy/paste value for TailwindCSS's theme. 3. Tailwind CSS colors in a cheatsheet with hex, rgb, hsl and new Tailwind v4 oklch color values. 5. Tailwind has had 3 different versions of its colour palette. 2 colour palette. Sometimes, the default color palette might not perfectly fit your design. Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color. backgroundColor section of your Tailwind config. Overriding a default color. js file is where you define your project's color palette, type scale, font stacks, breakpoints, border radius values, and more. Click-to-copy OKLCH, hex code and HSL values. TailwindCSS通过提供原子类使得样式的应用变得非常快速和高效，有时候我们需要在Tailwind的标准颜色集以外添加一些自定义颜色。在本教程中，将介绍如何在不删除默认颜色集的情况下，向TailwindCSS添加新的颜色。实现步骤一、定制tailwind. This cheatsheet contains all the default Tailwind CSS colors, including all hex, hsl, rgb and new Tailwind v4 oklch color values. You signed in with another tab or window. Applying Text A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Closest Tailwind Color ↗ Find the nearest colour from the Tailwind CSS color palette. Our tool maps colors to the closest Tailwind CSS color scale values, providing accurate suggestions that match the Tailwind color palette. Tailwind’s utility-first approach simplifies the process of applying colors to your HTML elements. js file, or customize just your text colors in the theme. Here are a few examples to help you get an idea of how to build components like this using Tailwind. Logical properties — simplifying RTL support and reducing the size of your generated CSS. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. color-scheme. A handy tool to easily preview all Tailwind CSS colors and copy their values (hex, rgb, hsl) or their class names to your clipboard. Instead of relying solely on automated algorithms, the team employed a manual selection process that involved careful visual judgment and extensive real-world testing in various design contexts. Tailwind CSS provides a carefully crafted default color palette that simplifies designing visually appealing and accessible interfaces. Applying on hover. adamwathan • 0. Explore Tailwind CSS colors in various formats including HSL, RGB, HEX, and the new OKLCH format for better color accuracy. For examplebtn-primarysetsprimarycolor for background and border, and setsprimary-contentcolor for the text automatically as default. 2. In @theme, you can place custom colors under the --color namespace and define custom shadow types under --shadow. Nov 18, 2020 · Today we're finally releasing Tailwind CSS v2. So the closest Tailwind colour to your hexcode may vary depending on which version of Tailwind you're using. Colors. Find the hex, rgb and hsl codes for all the colors in Tailwind CSS framework. 200 #7CC4E6. Easily tweak your Tailwind CSS colours Tailwind CSS includes a vast, beautiful color palette out of the box, carefully crafted by expert designers and suitable for a wide range of different design styles. By default Tailwind defines the entire color palette in a colors object at the top of your Tailwind config file. Generate perfect color palettes with our Tailwind CSS Color Generator. Feb 13, 2025 · Tailwind CSS v4 offers even more customization options to make your dark mode styling truly shine. By default Tailwind makes the entire default color palette available as text colors. 400 #3CA3D5 Forced Color Adjust; Tailwind CSS Colors. Alternatively, you can customize just your text colors by editing theme. Tailwind CSS includes a vast, beautiful color palette out of the box, carefully crafted by expert designers and suitable for a wide range of different design styles. Tailwind CSS includes a vast, beautiful color palette out of the box, carefully crafted by expert designers and suitable for a wide range of different design styles. Learn how to customize the default color palette for your Tailwind CSS project. Spacing. Each color has different shades, ranging from 100 (lightest) to 900 (darkest). The latest version of Tailwind v4's new colors in Figma variable format—featuring a redesigned, more vivid color palette that takes advantage of modern P3 displays. Arbitrary values Feb 2, 2024 · Before diving into text color, it’s important to understand Tailwind’s default color palette. Utilities for controlling the color of an element's borders. colors in your tailwind. This approach works well since it provides a consistent naming system across all the utilities. Learn how to use Tailwind's color system to create a consistent and beautiful color palette for your project. {// Design even faster with our collection of interactive tools to generate code for Tailwind CSS, generate color palettes, gradients for backgrounds or texts, grids for your layout, shadows for your components, and more. You can also use color names in utility classes just like Tailwind's original color names. See the various Tailwind colour palettes Background Colors. So let's take a look. Utilities for controlling the text color of an element. For more information about Tailwind’s responsive design features, check out the Responsive Design documentation. Customizing Color Palettes. Stay Consistent with Shades : Use the same shade (e. Tailwind color shades generator. 0 is the first major update ever, including: All-new color palette, featuring 220 total colors and a new workflow for building your own color schemes; Dark mode support, making it easier than ever to dynamically change your design when dark mode is enabled Oct 16, 2024 · The Tailwind Color Palette tool represents a significant leap forward in streamlining color management for web developers and designers working with TailwindCSS. Preview the colors in real-world UI examples and check accessible contrast ratios. Learn about the new OKLCH color system in Tailwind v4 for improved color consistency and vibrancy. Tailwind does not magically knows about CSS variables, and the color variables created earlier need to be hand-fed to the tailwind. Tailwind CSS comes with a wide variety of predefined colors. e. Our Closest Tailwind Color Finder tool helps you instantly find and copy the nearest Tailwind CSS color class to your input color. Most liked. Jul 2, 2024 · In this blog, we'll dive into how to set Tailwind background color and Tailwind color using its built-in classes, and see how to create custom colors. Tailwind offers several color Alternatively, you can customize just your background colors by editing theme. Create a Tailwind config file: Ensure your project has a tailwind. For example text-lg and text-black both share the text-namespace, but one is for font-size and the other is for color. It provides a comprehensive exploration and manipulation platform for tailwind CSS colors, allowing users to easily browse, find and generate custom color palettes. colors or theme. #F8FAFC. textColor in your tailwind. It’s way easier in Tailwind v4. v4 flips that script—now, you define colors directly in your CSS using the @theme directive. In such cases, you may Tailwind Color Matcher is a Visual Studio Code extension designed to streamline the workflow of front-end developers by translating HEX color values into equivalent Tailwind color classes. js file, or customize just your placeholder colors in the theme. Default tailwindcss palette colors (*-500) Community shades . Mar 9, 2024 · Honestly, this is quite painful. We're going to do this for Tailwind CSS version 3 and version 4. colors variable in your tailwind. To learn more, see the color customization documentation. Explore all Tailwind CSS v4 and v3 colors. If our project has a specific color scheme, we can replace Tailwind’s default colors with our own. Latest version: 3. Tailwind’s color palette is another area where customization is often needed, whether for branding purposes or to match a specific design aesthetic. This enables more comprehensive customization and extension for any project. You can customize them using utility classes if you want to change the color. One of its powerful features is the ability to easily add and customize colors to fit your project's design requirements. TailwindCSS v3. See the list of colors and their hex codes for each shade and hue. For custom colors, you may need to extend your Tailwind configuration. Add Your Own Colors: Add your brand colors in the theme. Examples of building buttons with Tailwind CSS. , 500) for main elements and lighter or darker shades (e. Tailwind css color tool contains tailwind css colors it contains all HTML colors, Cyan HTML colors, Blue HTML colors, Pink HTML colors, and more. 16 , 5 months ago 986 dependents licensed under $ MIT Tailwind also includes a forced color adjust utilities to opt in and out of forced colors. Our free online tool helps you create custom color schemes for your web projects. View the generated color palette below. Hover. Enter a base color: Enter a base color: Generated Color Pallete. 50. Learn more about Tailwind CSS: https://tailwindcss. Colors Gradients . If you'd like to override one of Tailwind's default colors but preserve the rest, simply provide the new values in the theme. Tailwind CSS 背景颜色 在 Tailwind CSS 中，背景颜色（Background Color）是最常用的工具类之一，它允许你快速为元素设置背景颜色。Tailwind 提供了多种颜色选项以及不同的色调，确保你能灵活地应用所需的样式。 Oct 28, 2024 · Tailwind CSS is a utility-first CSS framework that provides low-level CSS classes for building custom designs efficiently. Utilities for controlling the color scheme of an element. , primary, baseColor, textColor). Enter your primary color and get a beautiful, ready-to-use color combination. 0. Once you have a color palette in mind, you can start using Tailwind’s color utilities to apply the colors to your website. 🎨 Perfect for designers & developers who want access to Tailwind’s palette in different workflows. Customize the default colors, use functional or literal names, and access them in your CSS with config(). Let's get started! What is Tailwind? Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing custom CSS. This palette is organized into intuitive color families—like blue, green, or red—each containing multiple shades numbered from 50 to 950. Learn more about customizing the default theme in the theme customization documentation. A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults. You signed out in another tab or window. Color utility classes. backgroundColor or theme. Tailwind CSS v4 drastically simplifies the process of defining themable CSS variables: 1. Start using tw-colors in your project by running `npm i tw-colors`. Whether it's color names like 'red', 'blue', or 'green', hex codes, RGB or HSL values or tailwind color classes like rose-600 or teal-400, TailwindMate's converter will provide you with the closest matching Tailwind color class or equivalent color code values. Simply select a color and copy its code to your clipboard. 0 color palette Copy any Tailwind color with our beautiful Tailwind 4 color palette. Bring your color schemes to life with real-time component previews. 0 color palette. js file to add custom colors. Use the generated Tailwind CSS configuration in your project. Replacing Tailwind CSS Default Colors with Custom Palettes. Colors Tailwind CSS Colors TW elements are supported by an extensive Material Design color system that themes our styles and components. colors section of your tailwind. Alternatively, you could leave the color palette untouched and rely on tree-shaking unused styles to remove the colors you’re not using. colors section of the Tailwind config file. g. Tailwind 3. Anatomy of a Tailwind Color Palette This is just a shorthand for decoration-[var(<custom-property>)] that adds the var() function for you automatically. Jan 27, 2025 · Updated January 27, 2025 to reflect the official release of Tailwind v4. tailwind colors. This will generate classes like bg-regal-blue in addition to all of Tailwind's default colors. Use AI or manual color picker, fine-tune your colors, and export to Tailwind config, CSS variables, or shadcn/ui components. 00:00. Jan 29, 2025 · Color Groups. Each color comes in multiple gradients (50-900), making it perfect for creating consistent and accessible color schemes. What are theme variables? Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color. By default, Tailwind makes the entire default color palette available as placeholder colors. Tailwind gradients. Easily copy and paste the class names, CSS or even save the gradients as an image. Since the Tailwind v4 update the default and recommended way of managing and using colors is with native CSS variables. Official Tailwind CSS styles This file contains all of the Text, Color, and Effect Styles found in Tailwind CSS, along with the official typography, border radius, and spacing scales. And forces you to define your colors in a weird, custom format (space-separated R G and B channels). So if I start at the top left here, we have a raw colors palette. Mar 11, 2025 · Declaring shadow colors is unnecessary because the shadow's color must be passed separately. Mar 28, 2025 · I am using Tailwind CSS v4 and want to define custom colors that automatically switch between light and dark modes. #BFE3F5. Click-to-copy any TailwindCSS v4 color including HEX, OKLCH, or Tailwind color class. border-color. . 100 #9DD4EE. Tailwind comprend une palette de couleurs par défaut conçue par des experts et prête à l'emploi, qui constitue un excellent point de départ si vous n'avez pas votre propre image de marque en tête. How to Use Tailwind CSS Palette Generator. These groups include primary, secondary, accent, and neutral colors. The tool provides a user-friendly interface for selecting colors and automatically generates Tailwind-compatible shades. According to the Tailwind CSS team, the process of creating the Tailwind CSS color palette was a labor-intensive endeavor. , primary, brand). We'll work from this Figma file. js file, or customize just your background colors using the theme. in front of any color to apply it in dark mode. The color variables from Tailwind CSS can be used to set colors for text elements, borders, backgrounds, focus rings, and more. extend. Never forget any Tailwind CSS color again! Tailscan Devtool 30% off Tailscan - Devtool for Tailwind CSS is 30% off - Deal expires in 3 days and 2 hours Get it now → Tailwind CSS Colors v4 now uses OKLCH for a more vivid, modern color palette. Use the inverted-colors variant to conditionally add styles when the user has enabled an inverted color scheme: <. Theme. To control the text color of an element on hover, add the hover: prefix to any existing text color utility. 3 added more shades to the Tailwind 3. wktow xych dunzj xyqtwrp ahl kolqyb odsxj formfpr qoz gsrl