45
loading...
How to use Tailwind CSS in an ExpressJS app.
First use your terminal to change directory to your express application. Then install tailwind in your express app using:
npm i tailwindcssRun this command to generate the tailwind configuration file. This will create a tailwind.config.js file in your root directory.
npx tailwindcss initCreate a tailwind.css file in your public folder, I would advice you to create a stylesheets folder under the public folder to properly seperate your files(public/stylesheets/tailwind.css). After that copy and paste the following code in the tailwind.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;Install postcss globally. This allows us to use postcss in other projects without reinstalling for each projects.
npm install -g postcss-cliCreate a postcss configuration file in your root directory and call it postcss.config.js. Then copy the following configuration into your postcss.config.js file:
module.exports = {
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
}Add a build:css script to your package.json file so you can always build your css by running the command:
npm run build:css"scripts": {
"build:css": "postcss public/stylesheets/tailwind.css -o public/stylesheets/style.css"
},Import style.css in your application as you normally would and run your app. Congratulations.
45