tailwindcss使用

cc 发布于2018年10月22日 ∣ 约898字 · 需2分钟阅读()

在使用其他css框架的时候，都是给出ui组件，很多样式都是写死的，想要定制非常麻烦，所以也很难做出风格别致的界面。当然也是因为给出了不少组件，可以很快速的构建产品

Tailwindcss是相对于比较底层的框架，相比于其他css框架，它没有个人偏好预先设计的组件，同时你也不用脱离html就可以做出很好看的界面。你也可以抽象出自己的组件。同时修改默认的样式也非常方便，只需要在配置文件里添加上你期望的样式就好

classnames可以动态添加样式，方便书写对组件的多个状态控制

tailwindcss使用的时候都是作为postcss插件使用的

Create-react-app中使用

nextjs对tailwindcss集成比较好，装上就可以用，修改配置文件能自动更新，而Create-react-app中因为无法更改react-scripts的动态处理流程，所以最多只能启动的时候处理一次，若要修改能

初始化

1yarn add tailwindcss
2npx tailwindcss init -p #同时初始化postcss，tailwindcss作为其插件使用

修改package.json中的脚本运行部分

1"scripts": {
2 +"build:css": "postcss src/index.css -o src/base.css",
3 ^"start": "yarn run build:css && react-scripts start",
4 ^"build": "NODE_ENV=production yarn run build:css && react-scripts build",
5  "test": "react-scripts test",
6  "eject": "react-scripts eject"
7}

+是添加行，^是修改行，添加了前面的yarn run部分运行postcss处理

Svelte中使用

安装tailwindcss与rollup-plugin-postcss，修改rollup.config.js文件

 1...
 2import postcss from 'rollup-plugin-postcss'
 3...
 4export default {
 5	input: 'src/main.js',
 6	output: {
 7		sourcemap: !production,
 8		format: 'iife',
 9		name: 'app',
10		file: 'public/build/bundle.js'
11	},
12	plugins: [
13		postcss({
14			plugins: [
15				require('tailwindcss'),
16				require('postcss-preset-env')
17			]
18		}),
19		svelte({
20			// enable run-time checks when not in production
21			dev: !production,
22			// we'll extract any component CSS out into
23			// a separate file - better for performance
24			css: css => {
25				css.write('public/build/bundle.css', !production);  //后面参数表示是否生成sourcemap
26			}
27		}),
28    ...
29  	]
30  ...
31}

参考

https://muhajir.hashnode.dev/using-tailwindcss-with-sveltejs-cjwqh0s300009r0s1tehqu61g

https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5

tailwindcss配置

 1module.exports = {
 2  future: {
 3    removeDeprecatedGapUtilities: true,
 4    purgeLayersByDefault: true,
 5  },
 6  purge: {
 7    enabled: true, // 开启剪枝压缩，否则生成的文件会很大
 8    content: [
 9      './src/**/*.svelte', 
10      './src/**/*.js',
11      './src/**/*.html'
12    ]
13  },
14  theme: {
15    colors: {}, // 这里添加会覆盖原有配置，导致其他颜色不可用
16    extend: {  
17      colors: {
18        sea: '#4fc08d'
19      },
20      boxShadow: {
21        itm: '0 0 1rem rgba(161,177,204,0.4)'
22      },
23      inset: {
24        '1/2': '50%',
25      }
26    }
27  },
28  variants: {},
29  plugins: [],
30}
31