Building tailwind using Parcel and Postcss

[Rizary]

Hi, I just found tailwind and want to use it on my current project.

It is a simple javascript webpage (without framework), and I want to use Parcel and Postcss to build tailwind. So far, what i have in my postcss.config.js is:

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project 
  content: [
    './src/*.html',
    './src/*.js',
    // etc.
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
    require('cssnano')
  ]
}

And a default styles.css and tailwind.config.js.

I have use webpack, but since my goal is to produce styles.css only, webpack always produce .js file.

Since I don't know how to build tailwind using parcel and postcss, is there anyone here can give me some example on how to build tailwind using parcel?

I got error Could not load existing sourcemap of "node_modules/postcss/lib/map-generator.js". when trying to run parcel postcss.config.js

[Ahmed3rab]

In this Youtube stream last year, Adam plays around with Tailwind and Parcel, you might find what you're looking for. https://youtu.be/_JhTaENzfZQ

[TomS-]

CSS Nano is not required, it's built into Parcel. I wouldn't use a config file as an entry point. You will need an entry point like index.js and import your tailwind css file. Everything should work from there.

Like webpack, parcel is a bundler, if you just want to output css then Gulp will be better.

[hacknug]

I have this boilerplate project with TailwindCSS + Parcel set up. Maybe you'll find it useful: https://github.com/hacknug/tailwindcss-parcel-boilerplate