Tailwind Playground

A basic project showcasing Tailwind to help you get started.

It's bundled using Parcel, which comes with PostCSS and a nice local server and all that jazz.

Install dependencies

npm install

This should install Parcel and Tailwind.

Tailwind is compiled by Parcel as a PostCSS plugin, which you can see in .postcssrc. I've also included autoprefixer.

{
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {}
  }
}

PurgeCSS is included by Tailwind by default. Modify which files you'd like PurgeCSS to look at in the content object of tailwind.config.js. With Tailwind 3.0, this purge is done just in time, so you won't have every possible class permutation available in the compiled css, just the classes you use.

content: ["src/**/*.html", "src/**/*.css"],

Right now I just have it set up to look at html and css files.

Parcel is set to compile src/index.html as its entry file, which is configured in the source object of the package.json:

"source": "src/index.html",

If you have other files you'd like parcel to parse, you can add those to the source array:

"source": ["src/index.html 'src/page/index.html'"],

If you want to use globs (*) to specify any file ending in .html, in any folder /**/, instead of using source, add your entry files to your build and start scripts:

  "scripts": {
    "start": "parcel src/index.html src/**/*.html",
    "build": "parcel build src/index.html src/**/*.html",
  },

Read more about specifying entries in the Parcel docs

Run the app locally

You can just use npm as a task runner and run the start command in your terminal, which runs a local server at http://localhost:1234/ and has a watch, so it automatically compiles any changes.

npm run start

// OR

npm start

Build the app for production

To build the app for production locally, you can just use npm as a task runner and run the build command in your terminal.

npm run build

To build the app for production using a CI pipeline or something like Netlify, you'd supply the contents of the build script. For example, in Netlify, in your Build & Deploy > Continuous Deployment > Build Settings, you would set your Build command to parcel build, or parcel build src/index.html if you include entry files in your build script.

Note: Building before Tailwind 3.0:

If you're using Tailwind before 3.0 and don't have mode: jit enabled in your tailwind.config.js, you'll need to modify the scripts in the package.json to specify the environment so the classes are purged in production but not development, ie:

  "scripts": {
    "start": "NODE_ENV=development parcel",
    "build": "NODE_ENV=production parcel build",
  },