Discussions

We need tailwind to work on a current project, but as I know tailwind needs to be pushed at the start of the postcss plugins.

const htmlStandards = require('reshape-standard');
const cssStandards = require('spike-css-standards');
const jsStandards = require('spike-js-standards');
const env = process.env.SPIKE_ENV;
const Records = require('spike-records');
const MarkdownIt = require('markdown-it');
const path = require('path');
const md = new MarkdownIt();
var tailwindcss = require('tailwindcss')('./tailwind.js');

const css = cssStandards(
    {
      minify: env === 'production',
      warnForDuplicates: env !== 'production'
    }
)

css.plugins.push(tailwindcss);

const locals = {
  md: md.render.bind(md),
  mediaUrl: 'https://media.graphcms.com'
}
const apiUrl = 'https://api-uswest.graphcms.com/v1/cjj6ximdp01bv01ggojsg4m64/master'

module.exports = {
  devtool: 'source-map',
  ignore: ['**/layout.html', '**/_*', '**/.*', '*.md', 'yarn.lock', 'package-lock.json', 'Jenkinsfile'],
  reshape: htmlStandards({
    root: path.join(__dirname, 'views'),
    locals: (ctx) => locals,
    minify: env === 'production'
  }),
  postcss: css,
  babel: jsStandards(),
  plugins: [
    new Records({
      addDataTo: locals,
      three: { data: { foo: 'bar' } },
      projects: {
        graphql: {
          url: apiUrl,
          query: `{
            projects {
              id, name, description
            }
          }`
        },
        transform: (res) => res.data.projects
      }
    })
  ]
}

We currently have this setup, with the Tailwind loaded and pushed to the css standards stack. But Tailwind keeps on spitting out an error. It would be nice for a static site generator to atleast support Tailwind CSS! Thanks