Follow the bellow steps to compile your own version of Tailwindcss to our specs.
mkdir tailwindcss-project
cd tailwindcss-project
echo "" > package.json
touch package.json
{
"name": "tailwindcss-project",
"version": "1.0.0",
"private": true,
"dependencies": {
"autoprefixer": "9.6.1",
"postcss-cli": "6.1.3",
"tailwindcss": "1.1.2"
},
"scripts": {
"start:css": "postcss index.css -o tailwind.css -w",
"build:css": "postcss index.css -o tailwind.css --env production",
"build:tailwind": "tailwind build src/styles/index.css -o src/styles/tailwind.css"
}
}
The first script is for compiling the css in an interactive mode. This means that it will open a server that will watch for all css changes. The second one is for compiling the css directly without opening a server. The commands are quite equivalent with the difference that the first one will open the server and will watch for all css changes, i.e. if you add one more class inside your application, that class with it's css will be added to the tailwing.css file.index.css
and tailwind.css
to your own path where these two files are found, for example path/to/index.css
and path/to/tailwind.css
.echo "" > postcss.config.js
touch postcss.config.js
//postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss("./tailwind.config.js"),
require("autoprefixer"),
require("@fullhuman/postcss-purgecss")({
// in the content prop you should put all the files
// that are using tailwindcss classes, for example:
// content: ["./src/**/*.js", "./public/index.html"],
// or
// content: ["./src/**/*.vue", "./public/index.html"],
// or
// content: ["./src/**/*.jsx", "./public/index.html"],
content: [],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
]
};
echo "" > tailwind.config.js
touch tailwind.config.js
module.exports = {
variants: [
"responsive",
"group-hover",
"focus-within",
"first",
"last",
"odd",
"even",
"hover",
"focus",
"active",
"visited",
"disabled"
]
};
echo "" > index.css
touch index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
npm install
npm run build:tailwind
tailwindcss-project
folder, a new tailwind.css
file has been created. You will only need to import/include that file inside your project.The only problem with this file, is that it has 7.2 MB, which is quite huge.
npm run build:css
npm run start:css