{"id":2133,"date":"2018-09-19T17:18:25","date_gmt":"2018-09-19T16:18:25","guid":{"rendered":"http:\/\/www.jurecuhalev.com\/blog\/?p=2133"},"modified":"2018-09-19T17:18:25","modified_gmt":"2018-09-19T16:18:25","slug":"getting-tailwind-css-to-work-with-roots-sage-9-theme","status":"publish","type":"post","link":"https:\/\/www.jurecuhalev.com\/blog\/getting-tailwind-css-to-work-with-roots-sage-9-theme\/","title":{"rendered":"Getting tailwind css to work with Roots Sage 9 theme"},"content":{"rendered":"\n<p>I&#8217;m really enjoying how easy makes Sage WordPress Theme development. It&#8217;s very different in the beginning, but it soon feels a lot more like working in Django instead of WordPress.<\/p>\n\n\n\n<p>At the same time, I&#8217;ve also been trying to use tailwind for this project. To make it work in production, you need to configure a few more settings for purgecss that <a href=\"https:\/\/roots.io\/guides\/removing-unused-css-with-purgecss-uncss-in-sage\/\">official instructions <\/a>don&#8217;t cover. The trick is that you need to define a TailwindExtractor that doesn&#8217;t strip out <code>md:underline<\/code>, <code>hover:underline<\/code>\u00a0and similar color prefixed CSS classes.<\/p>\n\n\n\n<p>Notice that I also exclude a few of external packages, so that purgecss doesn&#8217;t strip their CSS rules.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ webpack.config.optimize.js\n\n'use strict'; \/\/ eslint-disable-line\n\nconst { default: ImageminPlugin } = require('imagemin-webpack-plugin');\nconst imageminMozjpeg = require('imagemin-mozjpeg');\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');\nconst glob = require('glob-all');\nconst PurgecssPlugin = require('purgecss-webpack-plugin');\n\nconst config = require('.\/config');\n\nclass TailwindExtractor {\n  static extract(content) {\n    return content.match(\/[A-Za-z0-9-_:\\\/]+\/g) || [];\n  }\n}\n\nmodule.exports = {\n  plugins: [\n    new ImageminPlugin({\n      optipng: { optimizationLevel: 7 },\n      gifsicle: { optimizationLevel: 3 },\n      pngquant: { quality: '65-90', speed: 4 },\n      svgo: {\n        plugins: [\n          { removeUnknownsAndDefaults: false },\n          { cleanupIDs: false },\n          { removeViewBox: false },\n        ],\n      },\n      plugins: [imageminMozjpeg({ quality: 75 })],\n      disable: (config.enabled.watcher),\n    }),\n    new UglifyJsPlugin({\n      uglifyOptions: {\n        ecma: 5,\n        compress: {\n          warnings: true,\n          drop_console: true,\n        },\n      },\n    }),\n    new PurgecssPlugin({\n      paths: glob.sync([\n        'app\/**\/*.php',\n        'resources\/views\/**\/*.php',\n        'resources\/assets\/scripts\/**\/*.js',\n        'node_modules\/vex-js\/dist\/js\/*.js',\n        'node_modules\/mapbox-gl\/dist\/*.js',\n        'node_modules\/slick-carousel\/slick\/slick.js',\n      ]),\n      extractors: [\n        {\n          extractor: TailwindExtractor,\n          extensions: [\"html\", \"js\", \"php\"],\n        },\n      ],\n      whitelist: [\n      ],\n    }),\n  ],\n};\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m really enjoying how easy makes Sage WordPress Theme development. It&#8217;s very different in the beginning, but it soon feels a lot more like working in Django instead of WordPress. At the same time, I&#8217;ve also been trying to use tailwind for this project. To make it work in production, you need to configure a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-2133","post","type-post","status-publish","format-standard","hentry","category-ideas"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/comments?post=2133"}],"version-history":[{"count":1,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2133\/revisions"}],"predecessor-version":[{"id":2134,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2133\/revisions\/2134"}],"wp:attachment":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/media?parent=2133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/categories?post=2133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/tags?post=2133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}