0%

在Phoenix框架中安装tailwindCSS

最近正在学习Phoenix框架,而且特别喜欢tailwindCSS(然而写不出漂亮的页面😂)。所以写一篇在Phoenix框架中安装tailwindCSS。

0x01 安装TailwindCSS

进入项目中的assets文件夹,然后安装tailwindCSS

1
2
3
cd assets

yarn add -D tailwindcss

0x02 创建配置文件

输入下面的命令创建tailwindCSS的配置文件。

1
npx tailwind init

这个命令会在assets文件夹下新建一个tailwind.config.js文件。

0x03 配置PostCss

接下来我们需要postCss这个工具来使tailwind正常工作。

1
yarn add -D postcss-loader

然后新建一个postcss.config.js文件,代码如下:

1
2
3
4
5
6
7
module.exports = {
plugins: [
require('tailwindcss')('./tailwind.config.js'),
require('autoprefixer')
],
}

0x04 配置webpack以及其他

打开webpack.config.js文件,将use: [MiniCssExtractPlugin.loader, 'css-loader']替换为use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']

然后修改app.css,代码如下:

1
2
3
4
5
@tailwind base;

@tailwind components;

@tailwind utilities;

接下来,你就可以愉快的使用 tailwindCSS 了。

欢迎关注我的其它发布渠道