About Tailwind CSS

It’s not like tailwind css is a new thing now, there’s been a lot of articles about it in the community, and by now there should be a lot of new projects that are trying to use it for style development. For example, the next.js cli already uses tailwind css instead of css modules:

Early on, I actually wanted to try tailwind css for a few reasons: atomization, design token, and more importantly, finally not having to worry about class naming, but there were a few factors that dissuaded me from using tailwind css:

1.  What’s new comes with new costs of learning
2. 
   Feel more suitable for new projects, our current project using css modules, introduced into the future, is not only new pages can be used, after all, a bunch of old page css modules file is not possible to change a little bit to change, would have been unfamiliar with the change up more time-consuming!

But the back or still access, access to the above mentioned after the discovery of the discouragement point or not worth mentioning, for problem 1, the actual use of the vscode plug-in with the Chenben is still relatively low, and tailwind css naming is still a certain law, such as the width of the basically w-[value/4px] , for problem 2, because of the back of their own wrote a tool to deal with it is also more fast.

Our 6 projects have been converted from css modules to tailwind css, 3 of them are operated by me, but the whole is already in the pipeline, so the process of switching to tailwind css is still very simple, I’ll share the process of switching to tailwind css by myself.

 preliminary

Be sure to install the vscode plugin marketplace.visualstudio.com/items?itemN…, which will read your tailwind css configuration, code hints and view style rules can be of great help:

tailwindcss.com/docs/instal… The official documentation goes into great detail, using create-react-app as an example:

The first step is to install tailwind and generate the corresponding configuration file:

npm install -D tailwindcss
// yarn add tailwindcss -D
npx tailwindcss init

 Documentation changes, mainly to generate a configuration file:

You can read the official documentation at tailwindcss.com/docs/config…, but for a project like ours that switches tailwind css from css modules, there are some configurations that we need to focus on:

1. 
   important , it can be boolean type or string type, the default is false , for new projects we usually set it directly to true , set it to true , for style rules, we will add !important to maximize the level, if it is a string, it is equivalent to a selector, if it is set to important: '#app' , then the corresponding tailwind class will become #app .tailwind-class: { /** */ } in this form.

2. 
   content That is, the file matching rule is usually just set to the form of ['./src/**/*.{ts,tsx}', './src/**/*.{css,scss}'] .

3. 
   corePlugins If you want to disable tailwind’s core plugin, you can choose to do so. For projects like ours, css normalize is usually already done, so you must disable its preflight plugin, or else there will be some style problems.

   corePlugins: {
       preflight: false,
     },
   

4. 
   theme The theme of this configuration is also very important, you can do some custom class, this will be said later, but in general, or the need to change its font-size , which will allow us to write the back of the font size of a lot of comfortable, because tailwind css font size is a combination of the size and height of the line, which is generally not acceptable:

    You need to add this configuration to exclude the effect of line height:

   theme: {
       // fix tailwind line-height
       fontSize: {
         xs: '12px',
         sm: '14px',
         base: '16px',
         lg: '18px',
         xl: '20px',
         '2xl': '24px',
         '3xl': '30px',
         '4xl': '36px',
         '5xl': '48px',
         '6xl': '60px',
         '7xl': '72px',
       },
     },
   

 The entire configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: ['./src/**/*.{ts,tsx}', './src/**/*.{css,scss}'],
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      fontSize: {
        xs: '12px',
        sm: '14px',
        base: '16px',
        lg: '18px',
        xl: '20px',
        '2xl': '24px',
        '3xl': '30px',
        '4xl': '36px',
        '5xl': '48px',
        '6xl': '60px',
        '7xl': '72px',
      },
    },
  },
  plugins: [],
};

Add it to your entry css file, note that it’s a css file, not a css modules file:

@tailwind base;
@tailwind components;
@tailwind utilities;

.html {
  font-size: 16px;
}

The main reason for adding font-size: 16px to html is to deal with the rem problem of tailwind css.

After doing this, you can test whether it takes effect. Find a page, add <div className="flex"></div> and execute yarn start to try whether it takes effect:

When you see this it means that the configuration is in effect, so you can happily write tailwind css.

 Development Experience

But when you actually use it, you may encounter some problems, such as this length did not find the corresponding, the color has no, this official document also explains in detail tailwindcss.com/docs/adding…. For example, I have a color: #666; is no corresponding tailwind class, just text-[#666] is good, or web page has a theme color, this color is used in many places, but I do not want to always text-[xxx] so, just need:

theme: {
    extend: {
      textColor: {
        666: '#666',
      },
      backgroundColor: {
        666: '#666',
      },
    },
},

You can then use the forms text-666 and bg-666 directly:

Handling old code (for JSX/TSX files, optional)

This step is optional, you can use github.com/shiyangzhao… to convert the old code and try to execute it (remember to commit the code before executing, this command will modify your code directly):

npx css-modules-to-tailwind src/**/*.tsx -f
// npx css-modules-to-tailwind src/**/*.jsx -f

For my test project, you can see that 48 files were modified:

View file changes for css modules file:

 For tsx/jsx files:

 Start the project to see the changes:

The style is unchanged and the class is converted successfully, perfect (bushi).

In summary, the cost of accessing tailwind css is very low, for me, it is very smooth to use, especially after you are a little familiar with the development speed is also whoosh, highly recommended ~!