Tailwindcss provides a modern spin on writing css. And unlike bootstrap, it allows us write css without predefined classes i.e we can create our own custom styles without external opinions on how things should look. Setting up tailwind is pretty straightforward, but with React, it might seem a little daunting. Here’s a quick tutorial to get you started creating awesome class-based inline styles using tailwindcss. 1. Create a new react app(duhh!). & & npx create-react-app tailwind-app amp; amp; cd tailwind-app 2. I like to write my css in SASS so let’s setup SCSS. Run the following command to install the SASS package. npm install node -sass 3. Install all the packages we need; tailwindcss itself, postcss-cli(helps us extract tailwind utility classes into our own css files) and autoprefixer(helps us ensure that the CSS we write is supported in all browsers). Let’s install them as development dependencies by using the flag. -D npm i tailwindcss postcss- autoprefixer - cli D 4. Run the following command to generate a tailwind configuration file. This file contains all the tailwind classes. npx tailwind init --full you should now see a file in your app directory. tailwind.config.js 5. Now, we need to setup our Postcss config to help us build our css files. First, let’s create the configuration file. touch postcss .config .js 6. Next, copy and paste the following code into the file. This block of code tells postcss to use the and plugins when creating out css/scss file. postcss.config.js tailwindcss autoprefixer Autoprefixer is a CSS post processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code against caniuse.com. .exports = { : [ ( ), ( )]
}; module plugins require "tailwindcss" require "autoprefixer" 7. Next, let’s create a directory. I like to keep my folder inside my folder Inside the src/styles directory, create a file and also move your file in here. Rename your to styles styles src . tailwind.scss index.css index. css index. scss Make sure to update the reference to in your to index.css index.js “./styles/index.scss” 8. Head into the tailwind.scss. We need to inject the tailwind utility classes into the file. Add the following code. We specify the tailwind utility classes we want in the tailwind.scss file. From here, will extract the classes from the declarations and pushes them into our file as you will see. postcss index.css @tailwind base;
@tailwind components
@tailwind utilities 9. Finally, head into your file. We need to make some changes to our scripts here to ensure that bundles all our css from into our file First, we create a script. We use the command (made available by the postss-cli) to extract the tailwind classes from tailwind.scss and output it into index.scss package.json Postcss tailwind.scss index.scss . build:css postcss " ": {
   "start": "npm run :css && react-scripts start build npm run build:css && react-scripts build test react-scripts test eject react-scripts eject build:css postcss src/styles/tailwind.scss -o src/styles/index.scss scripts build ",
   " ": " ",
  " ": " ",
   " ": " ",
  " ": " "
} Your package.json scripts should now look like above. Simply run like you normally would and your app should start running. You would notice that our file now contains all the css classes tailwind provides. npm start , index.scss All the tailwind classes are now available to use. I like to refer to the documentation to see the class names sometimes but generally, a lot of the class names are intuitive if you’re coming from bootstrap. If you’re looking to add additional CSS styles, you can add them inside the tailwind.scss file we have created. Each time you make a change to the file, you would need to rebuild the css by stopping the server and running again NB tailwind.scss npm start . Previously published at https://medium.com/@adebola.niran/how-to-setup-tailwindcss-with-create-react-app-and-s-b7243607c3e7

Keep

Read My Stories

Website

Blog

Writer. Editor and Developer.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Setup Tailwind CSS Framework with React

Too Long; Didn't Read

Company Mentioned

Adebola Adeniran

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Setup Tailwind CSS Framework with React

Too Long; Didn't Read

Company Mentioned

Adebola Adeniran

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES