Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My experience when installing tailwindcss v1.8+ on Windows hell man i takes 12 hours to get this cheatsheet

Tailwindcss v 1.8 Installation Guide on Windows

1. Install Tailwindcss

Open command prompt

OPTION 1

If you need to install tailwind in specific folder that you've been created before, just move to your project folder by type this

cd C:\Users\PCname\project\folder

OPTION 2

You may need quick step, just create new folder with this command

mkdir foldername
cd foldername

then install

npm install tailwindcss

then there must be error here

(in my cases) alway face this error and tailwindcss is not installed. What is the problem ? we need package.json file in our project folder. You know ? we can create a simple package.json file with this command

npm init

then we just need to fill some information about our project... some item can be blank or whatever you want.

After that, we'll have package.json file and now ... once again let's install tailwindcss, and it must works!! to see if tailwind installed just check your project folder is must be node_modules folder inside.

2. Create configuration file

You better still in command prompt, now we need tailwind.config.js

This should be done by type this

npx tailwindcss init

Then, we have tailwind.config.js

3. Create tailwind.css file

Now open your text editor

This file should contain default tailwind base style, component, utility, and our custom/combined style. But by default it may be like this

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Because i need to use postcss, not tailwind cli i am use @import.

4. Install PostCSS-cli

Open your command prompt

PostCSS CLI

npm install -g postcss-cli

Install postcss globally then test if there is installed or not with run this command

postcss --version

5. Create postcss.config

This can be done by text editor create new file named postcss.config.js

Then insert this script

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

What is autoprefixer ?? this can make our css bigger, but better browser support XD you better googling for this. But in this case let's turn off this option by adding double slash "//"

6. Well done

Yeah tailwind and postcss-cli installed, but where is .css file ? you must build it bro.

postcss tailwind.css -o style.css

Yeah.. now we should have style.css

Let's try some utility

<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Sad Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-100 h-screen flex flex-col justify-center items-center">
    <div class="p-4 m-4 text-2xl bg-teal-200 border-2 border-teal-900 text-teal-900 font-extrabold rounded-lg shadow">
    SAD
    </div>
</body>
</html>

It should looks like this

Ok... you know just play ...

7. How to Purgecss in Tailwindcss v 1.8+

Open your text editor

Find tailwind.config.js

you may add new configuration like this

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

that configuration will purge our big file css in to small one based on css classes used in .html file

For example we have simple page in section 6

We've use tailwind utility class

bg-gray-100 h-screen flex flex-col justify-center items-center
p-4 m-4 text-2xl bg-teal-200 border-2 border-teal-900 text-teal-900 font-extrabold rounded-lg shadow

and what we get next is just that classes + base class.

Let's begin, now open command prompt again and run this code, if you found error try to execute this code line by line

NODE_ENV=production
postcss tailwind.css -o production.css

if no error (just warning) we should have new file called production.css that contain our new purged css file, and it must not be more than 20KB for now.

8. How to Purgecss + Autoprefix in Tailwindcss v 1.8+

Update our postcss.config.js

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

Update our package.json file and this

  "browserslist": [
    "last 10 versions"
  ]

Then execute this in command prompt

NODE_ENV=production
postcss tailwind.css -o production.css

what is browserlist ?? you better googling bro.. but it will add something like -webkit-flex- and more like display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex;

based on number of browser last version... higher version.. higher browser support, but bigger css file.. is up to you

8. Use node scripts to easily create css in development/production

First because we use WINDOWS, we need to install "cross-env" package it will make our cmd run multiple line of node js command.

npm install -g cross-env Voila...

This mean, you can just run "npm run build" and our css with production ready will created. Just modify your package.json file and find scripts section then make it like this

"scripts": {
  "dev": "cross-env NODE_ENV=development postcss tailwind.css -o style.css",
  "build": "cross-env NODE_ENV=production postcss tailwind.css -o production.css"
}

save, then open command prompt we should be able to create dev version of css with this command (style.css)

npm run dev

and create production version with this command (production.css)

npm run build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment