setup tailwind css with golang using postcss
Use npm tailwind,postcss and postcss-cli
npm install tailwindcss postcss postcss-cli --save-devinstall watch
npm install watch --savenow run to create package.json
npm init -ycreate postcss.config.js with this config
const tailwindcss = require("tailwindcss")
const autoprefixer = require("autoprefixer")
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
]
}before editing the package.json file the project structure should be something like that
├── static
├── css
├── master.css
├── dist
├── templates
├── index.html
├── main.go
├── postcss.config.js
├── package.jsonso package.json will be like that
{
"name": "app name",
"version": "1.0.0",
"description": "tailwind setup with golang app using postcss",
"main": "index.js",
"scripts": {
"build:tailwind": "postcss ./static/css/master.css -o ./static/dist/tailwind.css",
"watch": "watch \"npm run build:tailwind\" ./templates"
},
"devDependencies": {
"postcss": "^7.0.17",
"postcss-cli": "^6.1.2",
"tailwindcss": "^1.0.3"
},
"dependencies": {
"watch": "^1.0.2"
},
"keywords": [],
"author": "",
"license": "ISC"
}index.html is so simple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind</title>
<link href="/static/dist/tailwind.css" rel="stylesheet">
</head>
<body>
</body>
</html>master.css
@tailwind base;
@tailwind components;
@tailwind utilities;now you can run npm to get the job done
npm run build:tailwind
#or
npm run watch
#to watch any changesIt's Done!!