Have only 30 seconds and want to create a Tailwind CSS project? I got you.

Create a CSS file inside your project and paste this (I'll call mine styles.css):

@tailwind base;

@tailwind components;

@tailwind utilities;

Now run in your terminal:

npx tailwindcss build styles.css -o output.css

Your Tailwind CSS styles are waiting for you at output.css. Just place it inside your HTML and you're done.

<link rel="stylesheet" href="output.css" />

DONE.

Now, if you have a little more time, let me give you some tips that will save you more than 30 seconds.

I need to extend it

The above setup will create a CSS file with all Tailwind CSS standards, which weights around 2MB, that's ok for development. When you finish your layout, or find that you need to extend some utilities, change fonts, etc, you'll need a configuration file. Oh, and there's a command for that:

npx tailwindcss init

This will create tailwind.config.js for you:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

You'll probably be fine without it for some time, and if you need to extend it, there are tons of examples in the official docs.

I want to remove unused styles

It's a great idea. All you gotta do is tell Tailwind where are you using it's styles. It's as simple as adding a purge option to tailwind.config.js with the path to your files. Say you are working with html, jsx and vue files somewhere inside src, it would look like this:

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

It will remove unused styles whenever your NODE_ENV is set to production.

BUT! You're busy, you just have 15 seconds more and cannot create a build environment! Just pass purge an object, put your paths inside the content property and add an enabled flag:

module.exports = {
  purge: {
    enabled: true,
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
    ],
  },
  theme: {},
  variants: {},
  plugins: [],
}

Now, you can run npx tailwindcss build styles.css -o output.css and your CSS will only contain used styles! Note that we don't even have a proper npm project yet, there's no package.json, no npm install...

What about minification and prefixes?

So, if you're thinking about minified CSS, you're probably worried about production CSS, then you probably already have a more robust project, with some other packages around. In this case, you'll need 4 more:

# npm install --save-dev does the same as npm i -D
npm i -D postcss-cli tailwindcss autoprefixer cssnano

PostCSS is a preprocessor and will run Tailwind (with the config you made earlier), prefix everything with Autoprefixer and minify with CSSNano.

For all of this to work together, you'll need a file called postcss.config.js:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
}

This will give you just the CSS you need, browser prefixes and minification. In your package.json you can create a build script that will run PostCSS:

"build:css": "postcss tailwind.css -o output.css"

You can use Tailwind with other preprocessors and find other setups in the docs

But if you really read until here, you would find so much more value watching the official screencasts.