Setting Up a Tailwind CSS project 101 - Visual Code on Windows

First Up, and once only - in Visual Code

There are various ways to install extensions but the easiest is to view extensions from the sidebar menu or Ctl + Shift + X and then search for the extension you wish to install.

Install Live Server - this will allow you to preview your page and css in build in realtime. Right click on an HTML file and select Open with Live Server.

Install Tailwind CSS Intellisense - assists is predictive suggestions when entering classes in markup; there are a LOT of potential classes for use in Tailwind CSS.

Once you've got these then close Visual Code for now.

Create your Project Structure

The structure should suit your own project - the following structure reflects a new Umbraco 9 project I am working on.

Navigate to your main solution folder in Explorer, i.e. the one with all your other project folders in e.g. xyx.CORE, xyz.WEB.
Shift + Right Click to open the Powershell window here.
In Powershell make a directory for the PRESENTATION aspect of your solution and in there make a folder for your new tailwind project and navigate into it.

Powershell:
	
	"mkdir xyz.PRESENTATION"
	"mkdir xyz.PRESENTATION/tailwind-project"
	"cd xyz.PRESENTATION/tailwind-project"

Powershell:
	
	"npm install -D [email protected] [email protected] [email protected]"

This will install tailwind (the basis for all tailwind operations), postcss (for processing the css ready for production) and autoprfixer (for vendor/browser compatibility of generated styles)

Powershell:

	"npm install -D [email protected] [email protected]"

This will install the post css command line interpreter and a css compressor utility that you will use in your production build script later on.

N.B. I found it important to run the above installs separately and AFTER the basic installs of tailwind, autoprefixer and postcss.

Powershell:

	"dir"

Just to check you now have a basic tailwind.config.js file in play.

Powershell:
	
	"npm install touch-cli -g"

Needed in order to command line create files (may be installed already)

Now we will create your location for source (src) css and js - some notes on structure.
Out dist directory will be the one that holds not only the uncompressed style but also the minified style, this is just so both can be seen together for comparison really.

The final copy script could choose to ignore the uncompressed - but I like to see them side by side even if only the min version will be used.

In this structure Jacavascript js files are always created and remain in the dist folder.
This means that our local html files reference the dist folder too, rather than some interim folder.

Later on below our Purge settings need to reflect the locations of the js and html files.

Powershell:

	"mkdir src"
	"cd css"
	"touch style.css"

	"mkdir dist/css"
	"mkdir dist/js"

Back up into the project root directory and then run ...

Powershell: 

 	"code ."

This will run Visual Code in the project.
In Visual Code now Locate your style.css and paste in the foundation of tailwind css.

	@tailwind base;
	@tailwind components;
	@tailwind utilities;

Open the Visual Code Terminal, Terminal >> New Terminal, from top menu enter command ...

"npx tailwindcss init"

Once run take note:

node_modules folder with al the modules you just installed.
package-lock.json holding the configuration for the insatlled packages - you will never edit this yourself.
package.json which will hold your build scripts - you will edit this.
tailwind.config.js which will hold configuration details for your tailwind project - you will edit this.

In Visual Code Terminal create new file postcss.config.js - this will configure our postcss routines, enter the following.

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

As post css operations we will be using tailwindcss, the autoprefixer and cssnano to compress our build output.

Edit tailwind.config.js and add mode 'jit' which enables the just in time compiler.

See: https://tailwindcss.com/docs/just-in-time-mode

As we have added jit mode we need to edit our purge config to make it useful in any way!

In purge add paths for any html or js that might use class names.

It is these class names that jit will maintain when it purges all redundancies from the css.

	module.exports = {
  	mode: 'jit',
  	purge: [
    		'./*.html',
    		'./dist/js/*.js',
  	],
  	darkMode: false, // or 'media' or 'class'
  	theme: {
   		extend: {},
  	},
  	variants: {
    		extend: {},
  	},
  	plugins: [],
	}

Powershell

	"npm install -g win-node-env" (may be installed already)

The above install command was run on my machine because initially I couldn't use the NODE_ENV argument below which makes sure all extraneous material is removed in the production build.

Now edit package.json and add in the the build scripts for dev and build to start with.

The dev build "build:tailwind-dev": "tailwind src/style.css -o dist/css/style.css --watch", compiles a stripped down css style.css and adds a file watcher so as you add new classes or structure they are instantly compiled and issued to your site preview in LiveServer.

The production build "build:tailwind-prod": "NODE_ENV=production postcss src/style.css -o public/css/style.min.css", states that the build is for production, then points to the postcss configuration
in order that the style.min.css is output and compressed using cssnano.

{
"name": "tailwindcss-project",
"version": "1.0.0",
"description": "",
"scripts": {
    "build:tailwind-dev": "npx tailwind -i src/style.css -o dist/css/style.css --watch",
    "build:tailwind-prod": "NODE_ENV=production postcss src/style.css -o dist/css/style.min.css"
},
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "cssnano": "^5.0.11",
    "postcss": "^8.3.11",
    "postcss-cli": "^9.0.2",
    "tailwindcss": "^2.2.19"
  }
}

The production script can further be extended to use powershell to copy over your resources into your actual production .WEB project by something along the lines of.

"build:tailwind-prod": "SET NODE_ENV=production postcss src/style.css -o dist/css/style.min.css && powershell copy-item dist\\* ..\\..\\xyz.WEB\\wwwroot\\assets -force -recurse -verbose"

If you do use this then create the destination folders first in your xyz.WEB project.

Test all by creating an html file in root of project and an app.js file in the dist/js folder as below. Then run the dev or prod builds and view the outputs in their intended locations.

Of particular note at the end of the uncompressed stlye.css will be the only styles that are used or referenced in the html files and js files.

Setting up a Tailwind Project 101 - Visual Code on Windows

First Up, and once only - in Visual Code

Create your Project Structure