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();

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create a Passwordless Login System for Your Chrome Extension

Soooo Fetch….but like technically!

How to make vue-router play nice with loading states

Test Blog Page

Setting Up Visual Studio Code For Front_End_Development!

Let’s Develop An Online Code Editor/Compiler Like HackerRank

Sharing React Query across micro frontends with single-spa and webpack module federation

Laravel 8 Redis caching

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

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

More from Medium

How to Create A Custom Shopify Landing Page With Tailwind CSS

How to add any Google font in Nuxt JS project with Tailwind CSS

How to use Tailwind CSS with Next.js

100 Wonderful WordPress Plugins

100 Wonderful WordPress Plugins