Setup Tailwind CSS in a WordPress plugin or theme — for Gutenberg

cd assets
npm init --yes
"scripts": {
"build": "cross-env NODE_ENV=production webpack --mode production --progress",
"dev": "cross-env NODE_ENV=development webpack --watch --mode development --progress",
"clean": "rm -rf build/*"
},
"keywords": [
"wordpress",
"themes"
],
"author": "Imran Sayed",
"license": "MIT",
"private": true,
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.2",
"css-loader": "^4.2.1",
"cssnano": "^4.1.10",
"file-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^4.0.1",
"precss": "^4.0.0",
"sass-loader": "^9.0.3",
"sass-mq": "^5.0.1",
"style-loader": "^1.2.1",
"tailwindcss": "^1.8.10",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
]
},
./node_modules/.bin/tailwind init
module.exports = {
darkMode: false,
purge: [
// Paths to your templates...
"../**.php",
"../**/**.php",
"./src/js/**.js"
],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
module.exports = {
plugins: [
require('tailwindcss'),
require('precss'),
require('autoprefixer')
]
}
// Tailwinds
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
<?php
/**
* Enqueue Assets
*
* @package twp-example
*/
class Enqueue_Assets { /**
* Constructor.
*/
public function __construct() {
/**
* Actions.
*/
add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_editor_assets' ] );
}
/**
* Enqueue editor scripts & styles.
*
*/
public function enqueue_editor_assets() {
// Theme Gutenberg blocks CSS.
$css_dependencies = [
'wp-block-library-theme',
'wp-block-library'
];
wp_enqueue_style(
'twp-editor-css',
TWP_CSS_URI . 'editor.css',
$css_dependencies,
filemtime( TWP_CSS_PATH . 'editor.css' ),
false
);
// Theme Gutenberg blocks JS.
$js_dependencies = [
'wp-block-editor',
'wp-blocks',
'wp-editor',
'wp-components',
'wp-compose',
'wp-data',
'wp-element',
'wp-hooks',
'wp-i18n',
'wp-blocks',
'wp-i18n',
'wp-element',
];
wp_enqueue_script(
'twp-editor-css',
TWP_JS_URI . 'editor.js',
$js_dependencies,
filemtime( TWP_JS_PATH . 'editor.js' ),
true
);
}
}
new Enqueue_Assets();

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Imran Sayed

Imran Sayed

591 Followers

👤 Full Stack Developer at rtCamp, Speaker, Blogger, YouTuber, Wordpress, React, Node, Laravel Developer http://youtube.com/ImranSayedDev