Getting strted Tailwindcss for AMP Installation and first app


Quick start

Summary of commonly used command may look like this. For details on each command, see information below.

npx tailwindcss build tailwind.css -o style.css

npm install -D tailwindcss postcss autoprefixer vite

npx tailwindcss init -p 



    "name": "up-and-runing",


    "main": "index.js",

    "scripts": {

        "dev": "vite"


"devDependencies": {

    "autoprefixer": "^10.4.0",

    "postcss": "^8.4.4",

    "tailwindcss": "^2.2.19",

    "vite": "^2.6.14"



npm run dev

Official tailwind documentation

There are Video tutorials and place where you can try directly in the browser playground.

Standard tailwind css 2.0 is also available in quick prototype tool

Installation procedure

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

It caused me a warning.

npm WARN saveError ENOENT: no such file or directory, open '/Users/sergejdergatsjev/Documents/tailwind_getingstarted/package.json'

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN notsup Unsupported engine for tailwindcss@2.2.19: wanted: {"node":">=12.13.0"} (current: {"node":"10.15.3","npm":"6.14.8"})

npm WARN notsup Not compatible with your version of node/npm: tailwindcss@2.2.19

npm WARN notsup Unsupported engine for fs-extra@10.0.0: wanted: {"node":">=12"} (current: {"node":"10.15.3","npm":"6.14.8"})

npm WARN notsup Not compatible with your version of node/npm: fs-extra@10.0.0

npm WARN notsup Unsupported engine for postcss-nested@5.0.6: wanted: {"node":">=12.0"} (current: {"node":"10.15.3","npm":"6.14.8"})

npm WARN notsup Not compatible with your version of node/npm: postcss-nested@5.0.6

npm WARN enoent ENOENT: no such file or directory, open '/Users/sergejdergatsjev/Documents/tailwind_getingstarted/package.json'

npm WARN tailwind_getingstarted No description

npm WARN tailwind_getingstarted No repository field.

npm WARN tailwind_getingstarted No README data

npm WARN tailwind_getingstarted No license field.

So I need to upgrade

npm install -g npm@latest

Then run the previous command. What does it mean?

sudo npm install -g n

(node:33146) ExperimentalWarning: The fs.promises API is experimental

npm WARN npm npm does not support Node.js v10.15.3

npm WARN npm You should probably upgrade to a newer version of node as we

npm WARN npm can't make any promises that npm will work with this version.

npm WARN npm You can find the latest version at

npm ERR! Unexpected token =

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/sergejdergatsjev/.npm/_logs/2021-11-26T17_06_07_700Z-debug.log

Download and install it with the package manager.


Ok, this is now updated

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npm WARN old lockfile

npm WARN old lockfile The package-lock.json file was created with an old version of npm,

npm WARN old lockfile so supplemental metadata must be fetched from the registry.

npm WARN old lockfile

npm WARN old lockfile This is a one-time fix-up, please be patient...

npm WARN old lockfile

up to date, audited 140 packages in 2s

21 packages are looking for funding

  run `npm fund` for details

found 0 vulnerabilities

npm notice

npm notice New patch version of npm available! 8.1.2 -> 8.1.4

npm notice Changelog:

npm notice Run npm install -g npm@8.1.4 to update!

npm notice

Now seems alright

But you have installed with this command many node modules.

I don't understand 100% what all this is needed for and should it be somewhere in a separate directory so in my case that's probably the wrong location.. Weird that in official documentation there is no information about this fact and it didn't say where to go to run these commands. Probably that comes naturally to someone who uses Node.js often. We rarely use it so it is not immediately obvious to me.

Now you need to create a configuration existing in a project directory.

// postcss.config.js

module.exports = {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},



npx tailwindcss init

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

Create a CSS file and use @ to include 

@tailwind base;

@tailwind components;

@tailwind utilities;

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.

I don't use any of your tools like React, Vue Js or anything like that

So we'll try PostCSS then..

npm install postcss-cli autoprefixer

npx postcss *.css --use autoprefixer -d build/

npx postcss -h

If you’d like to compile your CSS with Tailwind without integrating it directly into any sort of build tooling, 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.

Whit command 

npx tailwindcss -o tailwind.css

You can read more about tailwind in his not compiled file with comments..

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:

Or you can content of this file via include in Django project or static generator command commands.

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:

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

Use the -p flag if you’d like to also generate a basic postcss.config.js file alongside your tailwind.config.js file:


The theme section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site.

See for example responsive design. 


The plugins section allows you to register plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants.

Building for production

When building for production, set NODE_ENV=production on the command line when building your CSS
NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

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

You can also use the --minify flag to compress your CSS with cssnano:

NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify


Very interesting library with clean design and beautiful components. Solid colors for each site. So, I don’t need to look for a good designer. You can use it and compile your own CSS using only the classes you are using.

 Well integrated with VUE, which we occasionally use in web along with Lit.

So that can become a good alternative to our bootstrap hassle that we had to use for so long with a number of sites that Google has to index.

 Here's a guy made interesting post about using it.  

Example configuration files

Create a directory “tailwindcss or jstoolchain” in project app > create the below files inside created directory > run npm install inside this directory.


const colors = require('tailwindcss/colors')

module.exports = {

purge: {

enabled: true,

content: [






darkMode: false, // or 'media' or 'class'

theme: {

extend: {

colors: {

"lime": colors.lime,

"primary": colors.teal["600"],

"primary-dark": colors.teal["700"],

"complementary": "#940d18",

"complementary-dark": "#770a15",


zIndex: {

"1001": "1001",


screens: {

'print': {'raw': 'print'},

// => @media print { ... }




variants: {

extend: {

display: ["group-hover"],

opacity: ['disabled'],

cursor: ['disabled'],

backgroundColor: ['disabled'],



plugins: [],



module.exports = {

plugins: [









"scripts": {

"build": "NODE_ENV=production npx tailwindcss -i css/tailwind.css -o css/tailwind-output.css --postcss",

"build:production": "NODE_ENV=production npx tailwindcss -i css/tailwind.css -o ../job/templates/job/includes/viewjob_amp.min.css --minify --postcss --watch"


"dependencies": {

"autoprefixer": "^10.3.3",

"cross-env": "^7.0.3",

"postcss-cli": "^8.3.1",

"postcss-import": "^14.0.2",

"postcss-nested": "^5.0.6",

"postcss-nesting": "^8.0.1",

"sass": "^1.39.0",

"tailwindcss": "^2.2.9"


"devDependencies": {

"cssnano": "^5.0.8"




@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

@import "./main.scss";

Trouble shooting

npx tailwindcss -i input.css -o output.css


Stoped with Error: Cannot find module '@tailwindcss/forms'


const colors = require('tailwindcss/colors')

module.exports = {

  content: ["./*.{html,js}"],

  theme: {

    extend: {

            colors: {

                'warm-gray': colors.warmGray,





  plugins: [





Error: Cannot find module '@tailwindcss/forms'

If you run in “Cannot find module” error only thing that worked is to install manually each plugin via npm (following instructions from plugin githup page):

npm install @tailwindcss/typography