|
1 | | -# Trying-out Tailwind CSS with Parcel |
| 1 | +# parcel-typescript-tailwind-react |
2 | 2 |
|
3 | | -Few years ago, I was searching for a UI kit to be used in one of my hobby react apps. I found some good-looking React UI kits like [Ant Design](http://ant.design), [BlueprintJS](https://blueprintjs.com) and [Evergreen](https://evergreen.segment.com) but sometimes the bloat becomes unbearable and customizability becomes a priority. [Material UI](https://material-ui.com) is said to be the most popular one, but, no thanks; not a fan of material UI. Anyway, the discussion on available react UI kits is a topic for a different post. Here what happened was that I tried to create my own UI kit with SASS and soon found out that there is a gap between my idea on how the components should look and my knowledge on how to use CSS properly. |
| 3 | +## About |
4 | 4 |
|
5 | | -# What is Tailwind CSS? |
6 | | - |
7 | | -Then I found out Tailwind CSS, which focuses on being a low-level [utility-first](https://tailwindcss.com/docs/utility-first/) (meta) CSS framework. |
8 | | - |
9 | | -> Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. |
10 | | -
|
11 | | -With Tailwind CSS, you can use class names to apply bite-sized styling to your html elements, almost eliminating the pain of manually writing CSS. The [homepage](https://tailwindcss.com/) has a good demo so visit and see; don't take my word for it. |
12 | | - |
13 | | -# Let’s start! |
14 | | - |
15 | | -I’m trying out Tailwind CSS together with [Parcel Bundler](https://parceljs.org/), [TypeScript](https://www.typescriptlang.org/) and [React](https://reactjs.org), but the official documentation [lists](https://tailwindcss.com/docs/installation#using-tailwind-cli) other ways to use it. The stack I’ve chosen might as well be harder to get started. |
16 | | - |
17 | | -First I’ve created the `tailwind-test` folder and initialized the project with `yarn init -y` (create an empty project with [yarn](https://yarnpkg.com/), skipping all the questions). You can also use `npm init -y`. |
18 | | -First add parcel bundler; this takes care of how to load, process and bundle all the `.tsx`, .`css`, `.html` etc. you’re going to create. |
19 | | - |
20 | | -```sh |
21 | | -yarn add --dev parcel |
22 | | -``` |
23 | | - |
24 | | -Then add Tailwind CSS as stated in the documentation. |
25 | | - |
26 | | -```sh |
27 | | -yarn add tailwindcss postcss autoprefixer |
28 | | -``` |
29 | | - |
30 | | -Add the below `scripts` section to your `package.json` so that you can run, build and clean the project easily. |
31 | | - |
32 | | -```json |
33 | | -"scripts": { |
34 | | - "start": "parcel serve ./src/index.html --open", |
35 | | - "build": "parcel build --dist-dir dist src/index.html", |
36 | | - "clean": "rm -rf .parcel-cache dist" |
37 | | -}, |
38 | | -``` |
39 | | - |
40 | | -Create the `src` folder and create the `index.html` file with a basic HTML5 template. You can also use `html:5` snippet/emmet if you’re using [vsocde](https://code.visualstudio.com/). |
41 | | -Add `<div class="app"></div>` and `<script src="./main.ts"></script>` inside body, so that React can mount your app there. |
42 | | - |
43 | | -```html |
44 | | -<!DOCTYPE html> |
45 | | -<html lang="en"> |
46 | | - <head> |
47 | | - <meta charset="UTF-8" /> |
48 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
49 | | - <meta http-equiv="X-UA-Compatible" content="ie=edge" /> |
50 | | - <title>Document</title> |
51 | | - </head> |
52 | | - <body> |
53 | | - <div id="app"></div> |
54 | | - <script type="module" src="./main.ts"></script> |
55 | | - </body> |
56 | | -</html> |
57 | | -``` |
58 | | - |
59 | | -Create the `main.ts` and add your React app there. Note that we have added a custom card component which uses Tailwind styles with utility classes. `src/components/Card/index.tsx` and `src/views/App.tsx` are omitted for clarity. Utility classes is [not the only way](https://tailwindcss.com/docs/reusing-styles) you can add Tailwind styles. Since we’re trying Tailwind with React, utility classes is enough for us right now. |
60 | | - |
61 | | -```ts |
62 | | -import * as React from "react"; |
63 | | -import * as ReactDOM from "react-dom"; |
64 | | -import { App } from "./views/App"; |
65 | | - |
66 | | -ReactDOM.render(React.createElement(App), document.getElementById("app")); |
67 | | -``` |
68 | | - |
69 | | -Create `main.css` file and add the below. These are tailwind directives. This is needed to inject tailwind [styles](https://tailwindcss.com/docs/preflight) and utility classes into your CSS. |
70 | | - |
71 | | -```css |
72 | | -@tailwind base; |
73 | | - |
74 | | -@tailwind components; |
75 | | - |
76 | | -@tailwind utilities; |
77 | | -``` |
78 | | - |
79 | | -Add `.postcssrc` file inside the project folder (i.e.: one level up from `src` folder). Tailwind CSS is a [PostCSS](https://postcss.org/) plugin where PostCSS handles all pre/post processing of CSS you write, such as adding [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) [automatically](https://github.com/postcss/autoprefixer). Parcel has built-in support for PostCSS, but doesn’t know yet about Tailwind, so we have to configure it with the below content. Make sure you include `tailwindcss` before `autoprefixer`. |
80 | | - |
81 | | -```js |
82 | | -{ |
83 | | - "plugins": { |
84 | | - "postcss-import": true, |
85 | | - "tailwindcss": true, |
86 | | - "postcss-nested": true, |
87 | | - "autoprefixer": true |
88 | | - } |
89 | | -} |
90 | | -``` |
91 | | - |
92 | | -Now it’s show-time. Run `yarn` to install dependencies and `yarn start` to start. Since you have specified `--open` in `yarn start`, you’ll see the browser open with the `index.html` file. |
93 | | - |
94 | | -You should see a card with a title and a description. |
95 | | - |
96 | | -# Old tailwind versions |
97 | | - |
98 | | -Find my blogpost here |
99 | | -https://umstek.tk/posts/trying-out-tailwindcss-with-parcel/ which includes the original content written for tailwind 1.x and then updated for tailwind 2.x. |
100 | | - |
101 | | -# The good, the bad, and the ugly |
102 | | - |
103 | | -I can notice several good things about Tailwind CSS at a glance. |
104 | | - |
105 | | -- Get things done without having to write a lot of code. |
106 | | -- No need to worry about different CSS naming standards and conventions such as [BEM](http://getbem.com/naming/) or [OOCSS](http://oocss.org/). |
107 | | -- The built-in styles are pretty good and useful. |
108 | | -- Tailwind doesn’t hate customization. New plugins can be created and configuration is very flexible. |
109 | | -- Can write your own CSS also, if you want an escape route (No lock-in). |
110 | | - |
111 | | -There isn’t much to complain about the library but, |
112 | | - |
113 | | -- Fonts, Icons, animations aren’t built-in. Adding them can be complicated. |
114 | | -- Advanced controls such as switches, calendars, tables, floating notifications, modals etc. are not available. |
115 | | - |
116 | | -(I had more points here for the old versions but looks like now tailwind supports pretty much everything you'll need.) |
117 | | - |
118 | | -# Demo |
119 | | - |
120 | | - |
121 | | - |
122 | | -I created a template with the above plugins as a starting point [here](https://github.com/umstek/parcel-typescript-react-tailwind) on GitHub. |
123 | | - |
124 | | -Or, [see it in action](https://parcel-typescript-react-tailwind.vercel.app/). |
125 | | - |
126 | | -# Resources |
127 | | - |
128 | | -https://headlessui.dev/ |
129 | | - |
130 | | -https://tailwindui.com/ |
131 | | - |
132 | | -https://www.tailwindtoolbox.com/ |
133 | | - |
134 | | -https://tailwindcomponents.com/ |
135 | | - |
136 | | -https://tailwindtemplates.io/ |
137 | | - |
138 | | -https://github.com/aniftyco/awesome-tailwindcss |
| 5 | +This is the final output for the blog post <https://umstek.tk/blog/trying-out-tailwindcss-with-parcel/> |
0 commit comments