{"id":3563,"date":"2024-09-12T11:16:25","date_gmt":"2024-09-12T11:16:25","guid":{"rendered":"https:\/\/www.rcvtechnologies.com\/blog\/?p=3563"},"modified":"2026-03-31T12:24:44","modified_gmt":"2026-03-31T12:24:44","slug":"how-to-configure-tailwind-by-npm","status":"publish","type":"post","link":"https:\/\/www.rcvtechnologies.com\/blog\/how-to-configure-tailwind-by-npm\/","title":{"rendered":"How to configure Tailwind by npm?"},"content":{"rendered":"

1. Set Up a New Project<\/strong><\/h3>\n

Open your terminal in the VS Code project directory or create a new project.<\/p>\n

For a new Node.js project:<\/h4>\n
\n\t\t\t
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n <\/div>\n
\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n 
<\/p>\n
mkdir my-tailwind-project\r\ncd my-tailwind-project\r\nnpm init -y<\/pre>\n
<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
2. Install Tailwind CSS via npm<\/strong><\/h3>\n
Install Tailwind CSS and its dependencies with the following command:<\/p>\n
\n\t\t\t
\n                
\n                    
\n                        
<\/div>\n                        
<\/div>\n                        
<\/div>\n                    <\/div>\n                    
\n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
<\/p>\n
npm install -D tailwindcss postcss autoprefixer\r\n<\/pre>\n
<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
3. Create Configuration Files<\/strong><\/h3>\n
Generate tailwind.config.js<\/code> and postcss.config.js<\/code> by running:<\/p>\n
\n
\n
\n\t\t\t
\n                
\n                    
\n                        
<\/div>\n                        
<\/div>\n                        
<\/div>\n                    <\/div>\n                    
\n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
<\/p>\n
npx tailwindcss init -p\r\n<\/pre>\n
<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<\/div>\n
\n
This will generate:<\/p>\n