Sites that follow our best practices are almost always under 10kb compressed.
For casual chit-chat with others using the framework: Join the Tailwind CSS Discord Server. Note that while the CDN build is large (46.2kB compressed, 1967.4kB raw), it's not representative of the sizes you see when including Tailwind as part of your build process. For help, discussion about best practices, or any other conversation that would benefit from being searchable: Discuss the Tailwind CSS Typography plugin on GitHub. To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:
#Tailwindcss unpkg install
To get the most out of Tailwind, you really should install it via npm.
You can't enable features like group-hover. The unpkg CDN is powered by Cloudflare, one of the world's largest and fastest cloud. Instead, please reach out to unpkg with any questions or concerns. Please do not contact npm for help with unpkg. unpkg is not affiliated with or supported by npm, Inc. You can't use any directives like etc. unpkg is an open source project built and maintained by Michael Jackson. You can't customize Tailwind's default theme. exports = Using Tailwind via CDNīefore using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process. Generally this means adding Tailwind as a plugin in your file: module. 4 Process your CSS with Tailwind Using Tailwind with PostCSSįor most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain. Learn more about configuring Tailwind in the configuration documentation. You can optionally include the -p flag to generate a basic file at the same time: npx tailwindcss init -p This will create a minimal file at the root of your project: // If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package: npx tailwindcss init If you're using postcss-import (or a tool that uses it under the hood, such as Webpacker for Rails), use our imports instead of the directive to avoid issues when importing any of your own additional files: "tailwindcss/base" "tailwindcss/components" "tailwindcss/utilities" 3 Create your Tailwind config file (optional) Tailwind will swap these directives out at build time with all of its generated CSS. Use the directive to inject Tailwind's base, components, and utilities styles into your CSS: base components utilities # Using npm npm install Using Yarn yarn add 2 Add Tailwind to your CSS For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm.