Introduce TailwindCSS CLI with JIT-Mode

Remove Tailwind Compatibility Mode and PostCSS. Install newest tailwind and configure it to use JIT-Mode. Setup npm run scripts to run TailwindCSS CLI and Parcel in parallel. The Tailwind index.css and all .html/.ts files are scanned live and generated to /css/index-tailwind-output which is in turn included in index.html.
This commit is contained in:
Tobias Jordans 2021-09-22 19:56:05 +02:00
parent 6ceb589f00
commit 45e8b96f9f
7 changed files with 4871 additions and 1230 deletions

View file

@ -1,9 +1,10 @@
const plugin = require('tailwindcss/plugin')
module.exports = {
mode: 'jit',
purge: [
// './**/*.html',
// './**/*.js',
'./**/*.html',
'./**/*.ts',
],
darkMode: false, // or 'media' or 'class'
theme: {
@ -20,9 +21,9 @@ module.exports = {
}
},
plugins: [
plugin(function ({addVariant, e}) {
addVariant('landscape', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
plugin(function ({ addVariant, e }) {
addVariant('landscape', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`landscape${separator}${className}`)}:landscape`
})
})