In this blog we will discuss how we will setup Tailwind css in a WordPress plugin or theme.
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
If you would like to watch an example tutorial , here it is:
Lets setup webpack babel in your WordPress plugin or theme by creating assets folder
cd assets
npm init --yesThis will create package.json file
We would need these packages postcss-loader , precss, and tailwindcss. ( Note that precss already installs autoprefixer package so we don’t need to install it separately. )
Add this to your package.json file and run npm install This will install all packages required.
"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": "^2.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},Now create a webpack.config.js file and add the configurations
Notice that we are adding the postcss-loader in webpack file
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
]
},Now run the below command to generate the tailwind.config.js file
./node_modules/.bin/tailwind initUpdate the purge path in your tailwind.config.js file
module.exports = {
darkMode: false,
purge: [
// Paths to your templates...
"../**.php",
"../**/**.php",
"./src/js/**.js"
],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Now add the postcss.config.js file with following configurations
module.exports = {
plugins: [
require('tailwindcss'),
require('precss'),
require('autoprefixer')
]
}
Now add this in your sass file
// Tailwinds
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
When you run npm run dev its going to output the tailwind css in the build/css/editor.css
You can enqueue this css file in the editor like so
<?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();Now run npm run dev or npm run build. You will see the output in the build folder