avaitla/tailwind-simple.md

## tailwind-simple.md

      
    Raw
  

              tailwind-simple.md
            
          
    Setting up tailwind css the easiest way possible:
$ mkdir simple-tailwind
$ cd simple-tailwind

# We'll put our html templates inside templates/parts
# General config will go in the base of the templates folder
$ mkdir -p templates/parts
$ mkdir static

Now let's setup our templates directory:
$ cd templates

# Keep pressing enter until it stops bugging you
$ npm init
$ npm install tailwindcss

# Globally install postcss-cli
$ npm install -g postcss-cli
$ cd ..

Put the proper content into each of these files:
$ cat templates/tailwind.config.js
module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  purge: ["./parts/*.html"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

$ cat templates/postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

$ cat templates/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

$ cat templates/parts/button.html
<button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white">
  Hover me
</button>

$ cat templates/parts/page.html
<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

Now generate the final css from these two templates:
$ cd templates

# If you don't put NODE_ENV=production it doesn't purge
$ NODE_ENV=production npx tailwindcss build styles.css -o output.css
$ cd ..
$ cp templates/output.css static/

And now have your webserver generate a nice html with template parts and suppose it looks like static/generated.html:
$ cat static/generated.html
<html>
<head>
	<link rel="stylesheet" href="output.css"></link>
</head>
<body>
	<button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white">
	  Hover me
	</button>
</body>
</html>

Open the page static/generated.html in your browser to see it using the css generated by tailwind (and no webpack!)