Tailwind CSS installation and development environment
Tags: tutorial, css, javascript, tailwindcss
Published: 2020-08-22 21:30:03

Hello Devs! 🙂 

In this blog, we will see how to make our installation and development environment. ☝️

Don't worry! I will guide you and together, we will learn, ok!  
 
### 1:
**Open: We need to open our terminal and there open our folder.**
 
In this case, create a folder with: 
- mkdir "named for you" 

We can see the documents that we need to see:
- ls

To enter with:
- cd "name folder" 

👇

~~~
In terminal

tailwind_test % mkdir tailwind_test
tailwind_test % ls
 tailwind_test
tailwind_test % cd tailwind_test
~~~

### 2:
 **Initialize project: we can initialize the project with npm.**

👇

~~~
In terminal

tailwind_test % npm init -y
Wrote to /Users/Tere/Documents/project/package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
~~~

### 3:
 **Install Tailwind via npm:** In this case we make by npm. Also, in this case, We will install another way. 
### If you want to see, You'll be able to see it below in the second example in the terminal.

**First example:**

👇🛑 Remember in this case we make the second example, but also you can do it this way ; D 

~~~
In terminal

# Using npm
% npm install tailwindcss

# Using Yarn
% yarn add tailwindcss
~~~

**Second example:**

In this case, add autoprefixer library.
Where the library will take care of prefixing all CSS classes so that all browsers understand.

- autoprefixer

Also add CSS preprocessors are in charge of transforming the language rules used by Tailwind CSS into CSS code that is understandable by the browser, in this case PostCSS.

- postcss-cli

👇

~~~
In terminal

tailwind_test % npm install tailwindcss autoprefixer postcss-cli

npm notice created a lock file as package-lock.json. You should commit this file.
npm WARN project@1.0.0 No description
npm WARN project@1.0.0 No repository field.

 +autoprefixer@9.8.6
 +postcss-cli@7.1.1
 +tailwindcss@1.7.3
added 172 packages from 142 contributors and audited 172 packages in 20.567s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

tailwind_test % 
~~~

### 4:
**NPX TAILWINDCSS: We can run the next command that we will see next.**

> -npx tailwindcss init 

> That this command will create the folder config empty

> tailwind.config.js  
 
👇

~~~
In terminal

tailwind_test % npx tailwindcss init
 
   tailwindcss 1.7.3
  
   ✅ Created Tailwind config file: tailwind.config.js
  
tailwind_test % 
~~~

### In our visual studio code it looks like this below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4hok5ungt0mjtegc6alt.png)

### LATER:
 **Create a file: We need to create a file named postcss.config.js.** We can create it in your terminal or in your code editor.

Create file
- touch postcss.config.js

See all files
- ls

👇

~~~
In terminal

tailwind_test % touch postcss.config.js
tailwind_test % ls
node_modules		package-lock.json	package.json		postcss.config.js	tailwind.config.js
Ttailwind_test % 
~~~

### In our visual studio code it looks like this below
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l95t7qsdx6bwec6zgqcw.png)


### 5:
 **Config file postcss.config.js in VS code.** 

👇📄

~~~
In file postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}
~~~

### 6:
 **Config File CSS: In documentation tailwind. Add Tailwind to your CSS.** 

https://tailwindcss.com/docs/installation

Use the @tailwind directive to inject Tailwind's base, components, and utility styles into your CSS:

👇📄

~~~
In file example.css

@tailwind base;

@tailwind components;

@tailwind utilities;
~~~

### 7:
 **Config File tailwind.config.js: In documentation tailwind. Add Tailwind to your CSS.** 

https://tailwindcss.com/docs/installation you can search the working config in the documentation.

Is for change config for example in this case font family and extend 

👇📄

~~~
In file tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
    }
  },
  variants: {},
  plugins: [],
}
~~~

### 8:
 **Create HTML for file CSS and modify script package.json.** 

👇📄

~~~
In file index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>Hello world</h1>

</body>

</html>
~~~

The script will create the file style.css

👇📄

~~~
In file package.json

"scripts": {
    "build": "postcss css/tailwind.css -o public/css/style.css"
  },
~~~

👇

~~~
In terminal

tailwind_test % npm run build

>project@1.0.0 build /tailwind_test
>postcss css/tailwind.css -o public/css/style.css


risk - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
tailwind_test % 

~~~

### In our visual studio code it look like this below where file style was created

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ftljgs8aiq6ypazqtyn.png)


## Additionally to all this as advice and more.
You can add other npm facilities: This command will create a file where you will see all css properties for tailwind.

👇

~~~
In terminal

tailwind_test % npx tailwindcss init tailwind.cong.full.js --full
  
   tailwindcss 1.7.3
  
   ✅ Created Tailwind config file: tailwind.cong.full.js
  
tailwind_test %  

~~~

### recommended plug-in for VS code: Tailwind CSS IntelliSense

- This extension helps you autocomplete classes and styles that are using.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hrw0zozskr7kwqm1nw4k.png)

### Another tip, if you have any problem with your extensions, It probably that you need close and open the code editor.

## I share some sources with you of this blog
Tailwind css course at Platzi https://platzi.com
Tailwind documentation https://tailwindcss.com/docs/installation

Now we have done it! 👏

But If you have a question or feedback, please write to me!🙂