Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Integrate Tailwind (Ver 2.1.0 - Compatibility Build) inside Processwire
/* purgecss start ignore */
@import "tailwindcss/base";
@import "tailwindcss/components";
/* purgecss end ignore */
@import "./inc/sitewide.pcss";
@import "./inc/media_queries/sm.pcss";
@import "./inc/media_queries/md.pcss";
@import "./inc/media_queries/lg.pcss";
@import "./inc/media_queries/xl.pcss";
@import "tailwindcss/utilities";
/* purgecss start ignore */
@screen lg {
// Styles for large breakpoint
}
/* purgecss end ignore */
/* purgecss start ignore */
@screen md {
// Styles for medium breakpoint
}
/* purgecss end ignore */
{
"name": "templates",
"version": "1.0.0",
"description": "This file is here to ensure Git adds the dir to the repo. You may delete this file.",
"main": "postcss.config.js",
"dependencies": {
"postcss-cli": "^7.1.1",
"postcss-comment": "^2.0.0",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.3",
"postcss-preset-env": "^6.7.0"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^2.3.0",
"autoprefixer": "^9.8.6",
"cross-env": "^7.0.3",
"cssnano": "^4.1.10",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0"
},
"scripts": {
"start": "npx tailwindcss build pcss/kickstart.pcss -o css/dist.css",
"watch": "npx postcss pcss/kickstart.pcss -o css/dist.css --watch",
"build": "cross-env NODE_ENV=production npx postcss pcss/kickstart.pcss -o css/dist.css"
},
"author": "",
"license": "ISC"
}
const purgecss = require('@fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
'./*.php',
// etc.
],
whitelistPatterns: [
// Pattern to exclude during extraction
],
// Include any special characters you're using in this regular expression
defaultExtractor: (content) => content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
})
const cssnano = require('cssnano')
module.exports = () => ({
parser: require('postcss-comment'),
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('tailwindcss'),
require('postcss-preset-env')({
stage: 1
}),
...process.env.NODE_ENV === 'production' ? [purgecss, cssnano] : []
]
});
/* purgecss start ignore */
:root {
@apply antialiased font-body text-black;
}
html {
scroll-behavior: smooth;
}
// Place here all the styles you wish to share with all breakpoints
/* purgecss end ignore */
/* purgecss start ignore */
@screen sm {
// Styles for small breakpoint
}
/* purgecss end ignore */
module.exports = {
important: false,
purge: false,
theme: {
extend: {
margin: {
}
},
screens: {
sm: {
max: "767px",
},
md: {
min: "768px",
max: "1023px",
},
lg: {
min: "1024px",
max: "1279px",
},
xl: {
min: "1280px",
},
},
colors: {
},
fontFamily: {
},
fontSize: {
},
container: {
center: true,
},
},
variants: {},
plugins: [],
};
/* purgecss start ignore */
@screen xl {
// Styles for extra-large breakpoint
}
/* purgecss end ignore */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment