Installing Tailwind CSS can be a slightly different process depending on what other frameworks/tools you’re using. In this article, I will be showing you the most efficient way to install Tailwind CSS via npm on Linux.
I will be using VS Code ide for my installation & development.
1: Download & install the latest NODE JS Current Version from the following website https://nodejs.org/en/
To check whether node js is properly installed on your machine run the following command in the terminal node -v If you get the version number displayed that means it’s properly installed.
2: Open terminal in VS Code & type
npm init-y
This will generate the package.json file
3: Install Tailwind CSS with the following command
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
4: Create a new folder inside your Tailwind CSS folder & name it as “source”. Create “style.css” file inside the Source folder & add the following lines to the “source/style.css” file
@tailwind base; @tailwind components; @tailwind utilities;
5: Create another folder inside the Tailwind CSS folder & name that as “public”. Create your “index.html” & “style.css” files inside that “Public” folder.
6: Now open the “package.json” file & edit the script section like this
"scripts": {
"build:css": "tailwind build source/style.css -o public/style.css "
},
7: Open up the terminal again inside VS Code & type the following command
npm rum build:css
8: To generate the postcss config & tailwindcss config file use the following command
npx tailwindcss init -p
Leave a Reply