How to Quickly Install Tailwind CSS

Get up and running with all available features

Tailwind CSS is gaining traction among UI developers across the industry and as you’d imagine, there are a variety of ways to get it up and running depending on your development environment. As a result of this popularity I thought it only appropriate to give it a spin to see what all the buzz is about. The focus of this guide will be getting Tailwind CSS installed quickly and easily so you can get right to coding.

Method 1: Install via CDN

Fastest, but has limited features

Generally when it comes to CSS frameworks the fastest way to get up and running is to use the framework’s CDN, avoiding any sort of involved installation process entirely. Tailwind CSS is no different in this regard, with a single
tag that houses the latest default configuration build to get you up and running.

Unfortunately going down this route will lock you out of a bunch of functionality that you may want to familiarize yourself with including:

• Unable to customize the default theme
• Unable to install third-party plugins
• Unable to use directives
• Unable to enable features (ie group-hover)

Method 2: Tailwind CLI

Least involved, fully featured

Coming from vanilla CSS, I knew that I wanted to learn everything that Tailwind had to offer, but at the same time I didn’t want to contend with setting up a full developer environment with the likes of something like Webpack. As a result, I decided to use the Tailwind CLI to get up and running.

Here’s how I did it:

Note: I did this on a Windows 10 PC with npm installed

1. Create a new folder/directory for your project
2. Open up an admin command prompt and select your project’s folder/directory

3. Initialize your project with npm in your command prompt

This will take you through creating a package.json file, for our purposes I left all the values at their defaults. Once complete you should have a package.json file inside your project’s folder.

4. Install Tailwind using the command prompt

Once that completes you should have a node_modules folder and a package-lock.json file in your project’s folder.

5. Now that Tailwind is installed, it’s time to start testing it out. To do this, we’ll create a basic website file structure. Here’s how I set that up…

In the root of the project’s folder I made an index.html file and a styles folder. Inside of the styles folder, I created a styles.css file. You can check the visual reference below for clarity.

Next, I added the following HTML into the index.html file

Once that was done, I added the following Tailwind directives into the styles.css

6. Now that we have Tailwind installed and our basic website setup, it’s time to process our CSS. We’ll be doing this using the Tailwind CLI in the command prompt.

In your command prompt window from before, select your styles folder that you made in step 5 (see below).

With that selected, run the Tailwind CLI tool with the following command

If run successfully, you should now have an additional file in your styles folder named output.css which means you have successfully installed Tailwind CSS, all there is left to do is test to make sure.

7. To test out my Tailwind installation, I simply copied and pasted one of the navbar examples from the documentation into my index.html as shown below. Official documentation source

If you’ve done everything right so far, running your index.html in your browser should produce an image like below.

And that’s it! You’re ready to get familiar with all that Tailwind CSS has to offer!

Something to Note…

The above methods of installing Tailwind CSS are for trying out the framework, familiarizing yourself with it, or simple projects — there are a variety of install methods that are suitable for different developer environments that you may already be using. They can all be found here in the official installation documentation.

In the next guide we’ll be taking a look at putting together a custom navbar with Tailwind CSS, once it’s available it will be linked here.

Installation

Learn how to get Tailwind CSS up and running in your project.

Integration guides

Installing Tailwind CSS can be a slightly different process depending on what other frameworks/tools you’re using, so we’ve put together a bunch of guides that cover popular setups.

Don’t see your favorite tool in the list? We’re always working on new guides, but in the mean time you can follow the instructions for installing Tailwind CSS as a PostCSS plugin instead to get set up in no time.

Installing Tailwind CSS as a PostCSS plugin

Tailwind CSS requires Node.js 12.13.0 or higher.

For most real-world projects, we recommend installing Tailwind as a PostCSS plugin. Most modern frameworks use PostCSS under the hood already, and there’s a good chance you’ve used or are currently using other PostCSS plugins like autoprefixer.

If you’ve never heard of PostCSS or are wondering how it’s different from tools like Sass, read our guide on using PostCSS as your preprocessor for an introduction.

If this is a bit over your head and you’d like to try Tailwind without configuring PostCSS, read our instructions on using Tailwind without PostCSS instead.

Install Tailwind via npm

For most projects (and to take advantage of Tailwind’s customization features), you’ll want to install Tailwind and its peer-dependencies via npm.

Since Tailwind does not automatically add vendor prefixes to the CSS it generates, we recommend installing autoprefixer to handle this for you like we’ve shown in the snippet above.

If you’re integrating Tailwind with a tool that relies on an older version of PostCSS, you may see an error like this:

Add Tailwind as a PostCSS plugin

Add tailwindcss and autoprefixer to your PostCSS configuration. Most of the time this is a postcss.config.js file at the root of your project, but it could also be a .postcssrc file, or postcss key in your package.json file.

If you aren’t sure where PostCSS plugins are configured for the tools you’re using, you’ll want to refer to the documentation for those tools to learn where this should go. A search for «configure postcss » will get you the answer pretty fast, too.

If you’re using any other PostCSS plugins, you should read our documentation on using PostCSS as your preprocessor for more details about the best way to order them with Tailwind.

Create your configuration file

If you’d like to customize your Tailwind installation, generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

This will create a minimal tailwind.config.js file at the root of your project:

Learn more about configuring Tailwind in the configuration documentation.

Include Tailwind in your CSS

Create a CSS file if you don’t already have one, and use the @tailwind directive to inject Tailwind’s base , components , and utilities styles:

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.

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 @tailwind directive to avoid issues when importing any of your own additional files:

If you’re working in a JavaScript framework like React or Vue that supports directly importing CSS files into your JS, you can also skip creating a CSS file altogether and import tailwindcss/tailwind.css instead which has all of these directives already in place:

Building your CSS

How you actually build your project will depend on the tools that you’re using. Your framework may include a command like npm run dev to start a development server that compiles your CSS in the background, you may be running webpack yourself, or maybe you’re using postcss-cli and running a command like postcss styles.css -o compiled.css .

If you’re already familiar with PostCSS you probably know what you need to do, if not refer to the documentation for the tool you are using.

When building for production, be sure to configure the purge option to remove any unused classes for the smallest file size:

Read our separate guide on optimizing for production to learn more about tree-shaking unused styles for best performance.

If you’re integrating Tailwind with a tool that relies on an older version of PostCSS, you may see an error like this when trying to build your CSS:

Using Tailwind without PostCSS

Tailwind CSS requires Node.js 12.13.0 or higher.

For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to generate your CSS without configuring PostCSS or even installing Tailwind as a dependency if you don’t want to.

Use npx which is a tool that is automatically installed alongside npm to generate a fully compiled Tailwind CSS file:

This will create a file called tailwind.css generated based on Tailwind’s default configuration, and automatically add any necessary vendor prefixes using autoprefixer.

Now you can pull this file into your HTML just like any other stylesheet:

Using a custom CSS file

If you’d like to process any custom CSS alongside the default styles Tailwind generates, create a CSS file wherever you normally would and use the @tailwind directive to include Tailwind’s base , components , and utilities styles:

Then include the path to that file when building your CSS with npx tailwindcss build :

Read about adding base styles, extracting components, and adding new utilities to learn more about adding custom CSS on top of Tailwind.

Customizing your configuration

If you’d like to customize what Tailwind generates, create a tailwind.config.js file using the Tailwind CLI tool:

This will create a minimal tailwind.config.js file at the root of your project:

This file will automatically be read when building your CSS with npx tailwindcss build :

If you’d like to keep your config file in a different location or give it a different name, pass the config file path using the -c option when building your CSS:

Learn more about configuring Tailwind in the configuration documentation.

Disabling Autoprefixer

By default, the Tailwind CLI tool will run your CSS through Autoprefixer to add any necessary vendor prefixes. If you already have Autoprefixer set up in your build pipeline somewhere further down the chain, you can disable it in the Tailwind CLI tool using the —no-autoprefixer flag to avoid running it twice:

Building for production

When building for production, set NODE_ENV=production on the command line when building your CSS:

This will make sure Tailwind removes any unused CSS for best performance. Read our separate guide on optimizing for production to learn more.

Using Tailwind via CDN

Before 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.

You can’t customize Tailwind’s default theme

You can’t use any directives like @apply , @variants , etc.

You can’t enable additional variants like group-focus

You can’t install third-party plugins

You can’t tree-shake unused styles

To get the most out of Tailwind, you really should install it as a PostCSS plugin.

To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:

Note that while the CDN build is large ( 71.3kB compressed, 2872.2kB raw), it’s not representative of the sizes you see when including Tailwind as part of your build process.

Sites that follow our best practices are almost always under 10kb compressed.

HTML starter template

For Tailwind’s styles to work as expected, you’ll want to use the HTML5 doctype and include the responsive viewport meta tag to properly handle responsive styles on all devices.

Many front-end frameworks like Next.js, vue-cli and others do all this for you behind the scenes automatically, so depending on what you’re building you might not need to set this up.

PostCSS 7 compatibility build

As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven’t updated yet, which means you might see an error like this in your terminal after installing Tailwind and trying to compile your CSS:

To help bridge the gap until everyone has updated, we also publish a PostCSS 7 compatibility build under the compat channel on npm.

If you run into the error mentioned above, uninstall Tailwind and re-install using the compatibility build instead:

The compatibility build is identical to the main build in every way, so you aren’t missing out on any features or anything like that.

Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag:

How to install and run lessc on top of node.js and Windows?

Hi I am learning LESS and I would like to install lessc on my Windows 7.

The first step is I dowloaded and installed node.js (node-v0.10.5-x64.msi).

Then in a console, I ran

I got the following:

Then I ran the following in the same console:

‘lessc’ is not recognized as an internal or external command, operable program or batch file.

I am not sure where I got wrong. I googled but it seems there is too much stuff, not sure which one is right. Did many tests without any success.

Could someone tell me how to do it or give me a pointer to some place with detailed and latest install info for Windows?

9 Answers 9

In a console, run the following:

style.less must be in the console’s directory.

to get lessc working you have to add

step 1: npm install less -g

step 2: npm i less —save-dev

I guess you could add the bin folder in system properties -> advanced ->environment variables and append the whole path to the bin folder by edited the Path variable.

If you just installed node.js, the windows PATH variable won’t be updated within any running CMD windows. Try closing CMD and reopening it!

I fixed this issue by using Node Version Manager (nvm) to install and use the latest version of Node.js

nvm install latest
nvm use 12.4.0

After that I navigated to my project folder and typed:
npm install less -g and then
npm i less —save-dev

Finally I typed lessc less/index.less css/index.css to compile my less.

If you are using windows, don’t forget to open the command line console as an administrator.

After spending around number of hours hunting around to compile less files, I got very simple answer: