Installing with NPM

In order to work with a real project, you'll need to create a package.json file. This is a file that describes your project and how it should be installed.

Terminal Commands

npm init -y
npm install -D @tailwindcss/jit tailwindcss postcss
npx tailwindcss init -p

You can create a default one using npm init adding the -y option so it creates one with the defaults.

If you're using a package.json file, you'll need to install the tailwindcss and postcss packages.

Tailwind uses a configuration files to set up and modify how it works. You'll need to create at least a basic one and you can do that with this command. The -p option also creates a postcss.config.js file, which is the same thing for postcss.

Tailwind Config

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

Here's where we'll define the files you'll want to purge.

Package.json Changes

"scripts": {
  "start": "tailwindcss -o ./build/css/styles.css --watch"
},

Finally, we need to modify our package.json file so that it lets you start the JIT compiler. We took care of some of these things in our config files, so our start command is shorter.